css 文本 超過兩行或者三行隱藏並在后面加上省略號.....

css 文本 超過兩行或者三行隱藏並在后面加上省略號.....

text-aline: left / right / end / justify / inhertid;

首先 解決單行文字要設置兩端對齊:

text-aline: justify ;

該設置是無效的! 發現文本還是左對齊

<p sytle="width: 100px; height: 30px; border: 1px solid red;">hello world</p>

解決方法:

1 . 在標簽內部添加標簽

​

hello world

​ 對其中的 i 標簽設置 屬性

		{
			display: inline-block;
			conent: "";
			width: 100%;
		}

2. 添加偽類 在html 結構中盡量少添加多余的標簽,可以使用偽類達到相同的目的

   p{
   
   	&::after{
   
   	display: inline-block;
   
   	conent: "";
   
   	width: 100%;
   
   	}
   
   } 
   
   

   sass 語法

在實際開發中會遇到文字超過多少行,只是顯示固定行數,並且加上省略號,活着加上其他的處理.

超出加上省略號:

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;
	

再加上行數:

-webkit-line-clamp: 3;

以上代碼可以實現需求,但是在實際開發過程中,特別是在移動端適配過程中會出現很多問題

  .text {
        text-align: justify;
        line-height: 18px;
        &.hiddle {
          @include hiddle(2);
          // 此處是sass語法 等效於 兩行 + 省略號 不懂的正常寫就行
        }
      }

在移動端出現 結尾三個點點在某些瀏覽器中與文字重疊;

解決方法:

​ 出現重疊情況下是在,隱藏了多余行,我們可以在隱藏的時候,設置text-aline: left;

​ 點擊事件后: 設置text-aline: justify;

​ 就可以完美解決這個問題

​ 在文章開頭說的 text-aline: justify 單行問題,在這里不存在,多行出了最后一行都是兩端對齊.