关于单行文本溢出如何用css3解决的问题

首先是单行文本溢出的解决方法

先写一下样式

效果一：

#div1{
    width: 100px;
    border: 1px solid;

}

<div id="div1">
    lkasjlkjlkjklqwioeuoiu
</div>

效果2：

#div2{
    margin: 10px;
    width: 100px;
    height: 20px;
    border: 1px solid;
}

<div id="div2">
    好好学习天天向上好好学习天天向上好好学习天天向上
</div>

效果如下：

效果一：

解决后效果：

效果一解决方法：首先 给容器设置一个overflow:hidden;让溢出部分隐藏，接着再给容器一个text-overflow:ellipsis;(内部内容溢出容器时 将溢出的部分用省略号代替)

注：只有在容器的 overflow 的值不为 visibile时 才可以使用text-overflow

效果二：

解决后效果：

效果二解决方法：既然我们要解决的是单行文本溢出，那么首先我们要做到让他们在一行，利用 white-space:nowrap; 这个属性的作用就是强制文本在一行显示，接着我们就按照效果一的方法就可以解决啦!