單行文本溢出:css
代碼:html
css: #demo4-one{ width:150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } html: <div id="demo4-one"> 單行文本溢出,單行文本溢出,單行文本溢出,單行文本溢出,單行文本溢出,單行文本溢出, </div>
多行文本溢出:web
css: #demo4-two{ width:150px; display:-webkit-box !important; overflow:hidden; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; /*顯示兩行,若是顯示3行再溢出則改寫成 -webkit-line-clamp:3;*/ -webkit-line-clamp:2; } HTML: <div id="demo4-two"> 多行文本溢出,多行文本溢出,多行文本溢出,多行文本溢出,多行文本溢出,多行文本溢出, </div>