目录
文本自动换行样式 word-break: break-all
强制换行 word-break: break-all 怎么用 ？
white-space 属性的 normal 值和 nowrap 值的区别
HTML 标签 的 width 属性设置为 200px ，但对 数字 和 字母 无效 ？对中文有效 ；
数字 或者 字母 的 长度 大于 200px ，依然 不换行 ，
似乎是将这一长串的 数字 当做了 一个汉字 一般 ，
能把单元格顶到他们的换行处才换行
数字 和 字母 有 空 格 的话，确实是 200px 换行 ，但 一连串 无空格 的 数字 怎么让它处在 width=200px 的 约束 下呢 ?
问题解决结果：
<td style="word-break: break-all;" width="200"> '
连续 不间断 字符间没有 空格 ，在西文中这是一个完整的单词（ word ），
默认情况下，在 任何标签 里用 连续 不间断 的 字母 或者 数字 都不会自动换行的。
一般这种情况也多数是在写 demo 测试的时候才会出现，正常使用是极少出现的。
不过在某些地方能有预见性的进行 强制换行 那也未尝不是一种好习惯。
汉字 一个字 是一个 word ，而 英文 和 数字 有空格 的时候才会认为是 一个 word
文本自动换行样式 word-break: break-all
未加该 word-break: break-all 样式时，
联系地址数据加载完全，但是显示不全。
全选复制可以得到所有字符。
加了 word-break: break-all 样式时，
联系地址数据加载完全，换行显示出全部字符。
<template> <div> <li class="table-li"> <div class="table-li-name">职位：</div> <div class="table-li-value" v-text="form.title ? form.title : '-'"></div> </li> <li class="table-li"> <div class="table-li-name">性别：</div> <div class="table-li-value" v-text="form.gender === 0 ? '男' : '女'" ></div> </li> <li class="table-li"> <div class="table-li-name">用户签名：</div> <div class="table-li-value" v-text="form.sign ? form.sign : '-'"></div> </li> </div> </template> <script> export default {}; </script> <style lang="scss" scoped> .table { &-list { width: 100%; overflow: hidden; } &-li { width: 100%; padding: 8px 0; overflow: hidden; color: #303133; &-name { float: left; width: 84px; line-height: 20px; text-align: right; font-family: MicrosoftYaHei; font-size: 14px; color: #303133; letter-spacing: 0; } &-value { float: left; width: calc(100% - 120px); line-height: 20px; font-family: MicrosoftYaHei; margin-left: 14px; font-size: 14px; color: #303133; letter-spacing: 0; // 连续字符实现自动换行 word-break: break-all; } } &-ul { margin: 14px 40px; padding: 0px; } } </style>
强制换行 word-break: break-all 怎么用 ？
一般情况下，元素拥有 默认的 white-space: normal
（ 自动换行，PS：不换行 是 white-space: nowrap ）,
当录入的 文字 超过定义的 宽度 后会 自动 换行，
但当录入的 数据 是一堆 没有 空格 的 字符 或 字母 或 数字
（ 常规数据应该不会有吧，但有些测试人员是会这样子做的 ），
超过 容器宽度 时就会把 容器撑大 ，不换行。
解决方法（ 以 IE ，Chrome , FF 为 测试浏览器）：
{ word-break: break-all; word-wrap: break-word; }
以下是对这两种方法的区别说明：
1、word-break: break-all
例如 div 宽 200px ，它的 内容 就会到 200px 自动 换行，
如果该行末端有个 英文单词 很长（ congratulation ：祝贺 等 ），
它会把 单词 截断，变成该行末端为 conra ( congratulation 的 前段 部分 )，
下一行 为 tulation（ conguatulation ）的 后段部分了。
2、word-wrap: break-word 例子与上面一样，
但区别就是它会把 congratulation 整个单词 看成 一个整体 ，
如果该行 末端 宽度不够显示整个单词，它会自动把 整个单词 放到下一行，
而不会把单词截断掉的。
word-break: break-all 支持版本 ：
IE5 以上 ，该行为与 亚洲语言 的 normal 相同 。
也允许 非亚洲语言 文本行的任意字内断开。
该值适合包含一些 非亚洲文本的 亚洲文本。
word-wrap: break-word 支持版本 ：
IE5.5 以上 ，内容将在边界内换行。
如果需要，词内换行 ( word-break ) 也将发生。
表格自动换行，避免撑开。
语法：
word-break: normal | break-all | keep-all
参数：
normal : 依照 亚洲语言 和 非亚洲语言 的 文本规则，允许在字内 换行
break-all : 该行为与 亚洲语言 的 normal 相同。
也允许 非亚洲语言 文本行的任意字内断开。
该值适合包含一些 非亚洲文本 的 亚洲文本
keep-all : 与所有 非亚洲语言 的 normal 相同。
对于 中文，韩文，日文，不允许 字断开。
适合包含少量 亚洲文本 的 非亚洲文本
语法：
word-wrap : normal | break-word
参数：
normal : 允许内容顶开指定的容器边界
break-word : 内容将在边界内换行。
如果需要，词内换行（ word-break ）也行发生说明：
设置 或 检索 当 当前行 超过指定容器的边界时 是否断开 转行。
建议：word-break 用 3C 检测会显示问题的，导致 百度快照 也会出问题
- 这个属性 OPERAFIREFOX 浏览器也不支持 word-break 属性
可以用 white-space: normal; 来代替，
这样在 FireFox 和 IE 下就都能正确换行，
而且要注意，单词 间的 空格 不能用来代替，不然不能正确 换行。
white-space 属性的 normal 值和 nowrap 值的区别
white-space 属性
- normal ：默认 对文本的处理方式，文本 自动处理 换行，到达容器边界的内容会自动转到下一行。
- nowrap ：强制在同一行内显示所有文本，直到文本结束或者文本后面有标签。
举例代码 ：
<template> <div class="white"> <h3>这是一行文字 这是一行文字 这是一行文字</h3> </div> </template> <script> export default {}; </script> <style lang="scss" scoped> .white { width: 200px; height: 200px; background-color: #3dff48; /*white-space: normal;*/ white-space: nowrap; } </style>1. white-space: normal 效果图
2. white-space: nowrap 效果图
扫一扫
5092
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
