overflow: hidden;
/*自動隱藏文字
*/text-overflow: ellipsis;
/*文字隱藏後新增省略號
*/white-space: nowrap;
/*強制不換行
*/
overflow: hidden;
text-overflow: ellipsis;
text-overflow: -o-ellipsis-lastline;
display: -webkit-box;
-webkit-line-clamp: 2;
/*限制行數
*/-webkit-box-orient: vertical;
值
描述
normal
預設。空白會被瀏覽器忽略。
pre空白會被瀏覽器保留。其行為方式類似 html 中的標籤。
nowrap
文字不會換行，文字會在在同一行上繼續，直到遇到
標籤為止。
pre-wrap
保留空白符序列，但是正常地進行換行。
pre-line
合併空白符序列，但是保留換行符。
inherit
規定應該從父元素繼承 white-space 屬性的值。
值
描述
normal
使用瀏覽器預設的換行規則。
break-all
允許在單詞內換行(解決長單詞或url位址換行顯示)
keep-all
只能在半形空格或連字元處換行。
css 文字換行 文字溢位隱藏用省略號表示剩下內容
手指輕輕敲打著鍵盤，一句句，一行行，一段段，敲得都是些牽掛，都是些痴纏，是不是因為封存在心底的那抹溫柔，還沒泯滅，才會一次次敲下這些落寞的字跡。手指輕輕敲打著鍵盤，一句句，一行行，一段段，敲得都是些牽掛，都是些痴纏，是不是因為封存在心底的那抹溫柔，還沒泯滅，才會一次次敲下這些落寞的字跡。手指輕輕敲打...
單行 多行文字溢位隱藏顯示省略號
classname classname 其中多行文字中，因為我們使用了webkit的擴充套件屬性，該方法適用於核心為webkit的瀏覽器 注意 webkit line clamp是用來限制乙個塊元素顯示的文字行數。為了實現對應的效果，它需要結合其他的webkit屬性。常見的有 1 display w...
多行文字顯示省略號
單行文字溢位顯示省略號 核心css語句 1 overflow hidden 顧名思義超出限定的寬度就隱藏內容 2 white space nowrap 設定文字在一行顯示不能換行 3 text overflow ellipsis 規定當文字溢位時顯示省略符號來代表被修剪的文字 多行文字溢位顯示省略號...