css强制不换行代码 CSS 开发效率的必备
H5代码:<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maxi
H5代码:
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> p{ width: 200px; background-color: #aaa; } .p1{ white-space: nowrap; } .p2{ word-wrap: break-word; } .p3{ word-break: break-all; } .p4{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style></head><body><p class="p1">comrem dfgdsgfd sdffafsdafa dsfaf sdfsaf thgwer awdafqew</p><p class="p2">ljj ljljoi hsgfa tgregv dsgrewg ygvsg werfwgr rweg vcdgss</p><p class="p3">comrem dfgdsgfd sdffafsdafa dsfaf sdfsaf thgwer awdafqew</p><p class="p4">comrem dfgdsgfd sdffafsdafa dsfaf sdfsaf thgwer awdafqew dgadsfs</p></body></html>
强制不换行：white-space 属性是用来设置如何处理元素中的空白；
属性:
normal 默认。空白会被浏览器忽略。pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。pre-wrap 保留空白符序列，但是正常地进行换行。pre-line 合并空白符序列，但是保留换行符。inherit 规定应该从父元素继承 white-space 属性的值。p{ white-space: nowrap;}
2.Word wrap: word-wrap属性用于指示是否允许浏览器在单词中断句。这是为了防止当字符串太长而找不到其自然周期分隔符时溢出；
属性:
normal: 只在允许的断字点换行(浏览器保持默认处理)break-word:在长单词或URL地址内部进行换行p{ word-wrap: break-word;}
3.强制换行符:断词属性用于指示如何在词内断句；
属性:
normal：使用浏览器默认的换行规则。break-all:允许在单词内换行keep-all:只能在半角空格或连字符处换行p{ word-break: break-all;}
4.溢出显示省略号:ext-overflow CSS属性确定如何向用户通知未延迟的溢出内容。可以剪切它以显示省略号(“…”，U+2026水平省略号)或自定义字符串。
属性：clip这个关键字的意思是”在内容区域的极限处截断文本”，因此在字符的中间可能会发生截断。为了能在两个字符过渡处截断，你必须使用一个空字符串值 (’’)(To truncate at the transition between two characters, the empty string value (’’) must be used.)。此为默认值。ellipsis这个关键字的意思是“用一个省略号 (’…’, U+2026 HORIZONTAL ELLIPSIS)来表示被截断的文本”。这个省略号被添加在内容区域中，因此会减少显示的文本。如果空间太小到连省略号都容纳不下，那么这个省略号也会被截断。string用来表示被截断的文本。字符串内容将被添加在内容区域中，所以会减少显示出的文本。如果空间太小到连省略号都容纳不下，那么这个字符串也会被截断。p{ overflow: hidden; text-overflow: ellipsis;}
