CSS中字符太长截取 在CSS中，我们经常需要控制文字长度，比如网页排版时需要让文字在一行内显示，如果文字太长，就需要进行截取。那么，如何在CSS中控制字符太长时的截取呢？ 一、使用text-overflow属性 text-overflow属性定义当文本溢出包含它的元素时发生的事情。通过设置text-overflow:ellipsis，可以用省略号来代替溢出的文本。 例如，我们在以下代码的pre标签中设置了溢出的宽度为120px，同时设置了text-overflow:ellipsis：

p {
width: 120px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

这样，如果p标签中的文字超过了120px的宽度，那么就会用省略号来代替溢出的文本。 二、使用word-wrap属性 word-wrap属性定义浏览器如何在单词内换行。通过设置word-wrap:break-word，可以让长单词在适当的位置分割成两个串，从而达到截取的效果。 例如，我们在以下代码的pre标签中设置了宽度为200px，同时设置了word-wrap:break-word：

p {
width: 200px;
word-wrap: break-word;
}

这样，如果p标签中的文字超过了200px的宽度，那么长单词就会被适当的截取成两个串，从而实现截取的效果。 三、使用display属性 通过设置display属性为inline-block，我们可以把一个长文本截取成多个行，并且在一定程度上控制每一行的长度。 例如，我们在以下代码的pre标签中设置了宽度为200px，同时设置了display:inline-block：

p {
width: 200px;
display: inline-block;
}

这样，如果p标签中的文字超过了200px的宽度，那么就会分成多个行，并且在一定程度上控制每一行的长度。 总结 通过对text-overflow属性、word-wrap属性、display属性的掌握，我们可以在CSS中灵活地控制字符太长时的截取效果。在网页排版中，合理地使用字符截取，不仅可以提升排版美感，还可以优化网页的阅读体验。