css禁止自动换行（css 超出强制换行）
css禁止自动换行，原文标题：前端必备：css超出显示省略号、强制不换行，自动换行，强制断行。H5代码：<html
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, 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属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象；
属性：
- normal: 只在允许的断字点换行(浏览器保持默认处理)
- break-word:在长单词或URL地址内部进行换行
p{ word-wrap: break-word;}
3、强制断行：word-break 属性用来标明怎么样进行单词内的断句；
属性：
- normal：使用浏览器默认的换行规则。
- break-all:允许在单词内换行
- keep-all:只能在半角空格或连字符处换行
p{ word-break: break-all;}
4、溢出显示省略号：ext-overflow CSS 属性确定如何向用户发出未显示的溢出内容信号。它可以被剪切，显示一个省略号（’…’，U 2026 HORIZONTAL ELLIPSIS）或显示一个自定义字符串；
- 属性：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;}
本文《css禁止自动换行（css 超出强制换行）》由网赚联盟（ wangzhuan.org.cn ）整理或原创，感谢您的阅读。
随机文章
站长导航关键词排名优化
网站内容优化
GEO培训
SEO教程
站长导航
友情链接交换
搜素引擎算法
百度搜索“网赚联盟”即可找到本站，微信搜索“小小课堂网”关注小小课堂网公众号。网赚联盟（ wangzhuan.org.cn ）欢迎用户投稿，发布者：敲代码的猪，文章版权归作者所有，投稿文章不代表网赚联盟立场，中二少年发布为网赚联盟原创文章，转载请注明出处：https://wangzhuan.org.cn/338855.html
微信扫一扫
支付宝扫一扫
