单行文本与多行文本的溢出处理

1.单行文本进行操作设置(只适合单行文本操作)

width：**px；设置高度才可以判断好文本的溢出范围。
overflow:hidden; 溢出的部分进行隐藏
text-overflow:ellipsis; 文字溢出的部分进行省略操作
white-space:nowrap; 元素强制不换行

white-space：
normal 空白会被忽略掉
pre 空白会被保留下来 类似于html的 pre
nowrap 文本不会换行，在同一行上继续，直到遇见<br>标签为止
pre-wrap 保留空白符号，但是能正常的进行换行
pre-line 合并空白的序列，但是保留换行符号。
lnherit 从父元素进行继承属性。

text-overflow：
clip 修改文字
ellipsis 用省略号来代替
string 使用给定的符号来代表被修剪的文本。

2.多行文本进行溢出处理
width：***px；进行宽度设置。
overflow：hidden； 溢出后进行隐藏。
text-overflow：hidden；文本超出后进行隐藏
display：-webkit-box；
-wedkit-line-clamp：3；控制多行文本的行数
-wedkit-box-orient：vertical； 从顶部向底部垂直布置子元素。

box-orien 指定一个box子元素是否应按照水平或垂直排列。
horizontal 制定一个子元素在水平线上从左到右排列
vertical 从顶部向底部垂直布置子元素
inline-axis 子元素沿着内联坐标轴（映射到横向）
block-axis 子元素沿着块坐标轴 （映射到垂直）
inherit 从父元素进行继承

转载于:https://www.cnblogs.com/akone/p/11481103.html