文字溢出解决方案

1. 单行文字溢出

<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

3. 补充

1. letter-spacing设置字符间距，word-spacing设置单词间距；所以中文调整字间距使用
   word-spacing无效的,word-spacing代表英文单词之间的间距。
2. 设置首字母大写，使用选择器:first-letter 来指定元素第一个字母的样式。
   注意：该选择器仅适用块级元素中。

颜色的表示

效果图

尺寸的表示