css -- 文字溢出 · 前端知识 -- 学习整理

> # 文字溢出 ~~~ 1.处理英文 -- word-break 2.出列汉字 -- white-space 3.文字溢出 -- text-overflow ~~~ > ##### word-break -- 换行后处理英文单词是否打碎 ~~~ 1.normal 使用浏览器默认的换行规则。 2.break-all 允许在单词内换行。 3.keep-all 只能在半角空格或连字符处换行。解释： normal和keep-all 展示效果一致的，区别在于真的语言略有区别，但可以忽略 ~~~ * break-all 英文句子长度超过块元素的宽度时，不会保证单词的完整度而打断单词 ![](https://box.kancloud.cn/e8dc94021a03cfacf34e5c50451e3b40_207x54.png) * keep-all 会保证单词完整度，但是单词有‘-’ 符号除外 ![](https://box.kancloud.cn/35149ac3174f8dffceaa3fd8b82bc59a_157x49.png) > ##### white-space -- 强制在一行显示(中英都好用） ~~~ 1.normal : 　默认处理方式 2.nowrap : 　强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。 ~~~ > ##### text-overflow -- 文字溢出是否显示省略号 ~~~ 1.clip : 　不显示省略标记（...），而是简单的裁切 2.ellipsis : 　当对象内文本溢出时显示省略标记（...） 3.注意一定要首先强制一行内显示，再次和overflow属性搭配使用 ~~~ * 案例 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> div { width: 120px; height: 20px; border: 1px solid #f00; white-space: nowrap; /* 首先先需要添加这句话强制一行*/ overflow: hidden; /* 其次必须有这句话 */ /* text-overflow: clip; 直接裁剪 */ text-overflow: ellipsis; /* 超出的部分，省略号代替 */ } </style> </head> <body> <div> 我的名字是你好才是大家好 </div> </body> </html> ~~~ > ##### 多行文字 * 只兼容 webkit 内核的 ~~~ overflow: hidden;溢出隐藏 text-overflow: ellipsis; 使用省略号显示未显示内容 -webkit-box-orient: ; 设置盒子内的对象排序方式 display: -webkit-box; 将对象设置为伸缩盒子显示 -webkit-line-clamp: 用来限制行数以p标签伪列 p{ display: -webkit-box; -webkit-box-orient:vertical; /*垂直排列*/ -webkit-line-clamp:2; overflow: hidden; text-overflow: ellipsis; } ~~~ * 兼容所有浏览器 ~~~ p{ height: 30px; /*块级元素的高，比如实际文字内容将块级元素撑开的高度是60px，我们设置展示高度小于实际高度*/ line-height: 2em;/*设置行高这样让单行文字显示清晰设置行高是字体高度两倍因此是两行*/ overflow: hidden;/*由于高度小于实际高度，这样溢出的文字就会被隐藏*/ border: 1px solid red;/*根据需求来添加边框*/ position: relative;/*为接下来的伪元素做的定位*/ } p::after{ content: '...';/*设置省略号*/ position: absolute; right: 0; bottom: 0;/*设置定位位置在最右面*/ padding:0 0 0 10px ; background: #fff; /*设置背景颜色，这样三个点所在的伪元素的背景颜色就会盖住最后的字*/ } ~~~