标签：修剪 space 换行 text 滚动条 overflow 文本
（1）white-space
设置元素对内容中的空格的处理方式
| 值 | 描述 |
|---|---|
| normal | 默认。文本空白 换行会被浏览器忽略。 |
| pre | 保留文本原样式 比如空格或换行 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到br标签为止。 |
| pre-wrap | 保留空白符序列，保留换行符。如果文本超出容器宽度处没有换行符自动换行 |
| pre-line | 合并空白符序列，保留换行符。如果文本超出容器宽度处没有换行符自动换行 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
（2）overflow
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
如果父元素宽高能够包含子元素 auto就不会出现滚动条 scroll 就会出现滚动条
（3）text-overflow
用来控制超长溢出的文字内容的显示方式
| 值 | 描述 |
|---|---|
| clip | 修剪文本。 |
| ellipsis | 显示省略符号来代表被修剪的文本。 |
单行文本溢出
div{
width: 200px;
height: 100px;
border: 2px solid black;
/* 强制一行显示*/
white-space: nowrap;
/* 超出部分隐藏 */
overflow: hidden;
/* 超出部分省略号 */
text-overflow: ellipsis;
}
多行文本溢出
div{
width: 200px;
/* 不要设置高度 */
overflow: hidden;
text-overflow: ellipsis;
/* 1.必须结合的属性，将对象作为弹性伸缩盒子模型显示 */
}
单词拆分
p{
width:9em;
border:1px solid #000000;
word-break:keep-all;
}
标签：修剪,space,换行,text,滚动条,overflow,文本 来源： https://www.cnblogs.com/LIXI-/p/16486164.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。