文字溢出

文字溢出

  我们经常会遇到文字的内容大于盒子的情况，比如以下

<p>
    文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</p>

p {
    width: 100px;
    height: 20px;
    border: 1px solid red;
}

  我们一般需要让文字在一行内显示，并且多出的部分隐藏掉，设置如下

white-space: nowrap; /*强制一行显示*/
overflow: hidden;    /*超出盒子部分隐藏*/

  最后一个效果就是显示省略号，设置如下

text-overflow: ellipsis;  /*显示省略号*/