css处理超出文本截断问题的两种情况(多行或者单行)
生活随笔
收集整理的這篇文章主要介紹了
css处理超出文本截断问题的两种情况(多行或者单行)
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1.非多行的簡單處理方式:
css代碼:
.words{width:400px;overflow:hidden; /*超過部分不顯示*/ text-overflow:ellipsis; /*超過部分用點(diǎn)點(diǎn)表示*/white-space:nowrap;/*不換行*/ }2.規(guī)定行數(shù)的截?cái)嗵幚矸绞?/strong>
css代碼:
.words{width:400px;text-overflow: ellipsis; /*有些示例里需要定義該屬性,實(shí)際可省略*/display: -webkit-box;-webkit-line-clamp: 2;/*規(guī)定超過兩行的部分截?cái)?/-webkit-box-orient: vertical;overflow : hidden; word-break: break-all;/*在任何地方換行*/ }
?
轉(zhuǎn)載于:https://www.cnblogs.com/alsf/p/7570811.html
總結(jié)
以上是生活随笔為你收集整理的css处理超出文本截断问题的两种情况(多行或者单行)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: STM8,延时函数
- 下一篇: 基于 Laravel 5 构建的、支持模