> # 文字溢出 ~~~ 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; /*设置背景颜色，这样三个点所在的伪元素的背景颜色就会盖住最后的字*/ } ~~~