文字溢出解决方案
- 单行文字溢出
<style type="text/css">
#container{
width: 100px;
height: 100px;
border: 1px solid blue;
overflow: hidden; /* 表示文本超出元素宽度隐藏 */
text-overflow: ellipsis; /* 表示在文本溢出时使用省略号表示 */
white-space: nowrap; /* 表示文本单行显示不换行,直到遇到 <br> 标签为止 */
}
</style>
2. 多行文字溢出
<div id="container">
单行文字、多行文字溢出时省略号表示的多种解决方式；调整字符间距；段落首字母大写缩进效果；
</div>
<style type="text/css">
#container{
width: 100px;
height: 100px;
border: 1px solid blue;
display: -webkit-box; /* 定义使用webkit弹性盒子模型 */
-webkit-box-orient: vertical; /* 定义盒子子元素排列方式 */
-webkit-line-clamp: 5; /* 用于限定一个块级元素显示的文本行数 */
overflow: hidden;
line-height: 20px;
text-indent: 2em; /* text-indent可以使得容器内首行缩进一定单位。em是相对单位，2em表示段落缩进2个汉字，text-indent只对p和div标签有效，对br换行标签无效 */
}
</style>
<div id="container">
单行文字、多行文字溢出时省略号表示的多种解决方式；调整字符间距；段落首字母大写缩进效果；
</div>
注意：
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端页面；并且
需要将height设置为line-height的倍数，不然会造成文字部分露出。
最终效果
image.png
- 补充
1. letter-spacing设置字符间距，word-spacing设置单词间距；所以中文调整字间距使用
word-spacing无效的,word-spacing代表英文单词之间的间距。
2. 设置首字母大写，使用选择器:first-letter 来指定元素第一个字母的样式。
注意：该选择器仅适用块级元素中。
颜色的表示
![]()
效果图
![]()
尺寸的表示
![]()
