CSS限制单行多行

限制单行

overflow:hidden;
text-overflow:ellipsis; 
white-space:nowrap; 

限制多行

overflow:hidden; 
text-overflow:ellipsis;
display:-webkit-box; 
white-space:pre-wrap;
-webkit-box-orient:vertical;
-webkit-line-clamp:2; //限几行改成几

好了，文章结束了...个鬼啊。哪有这么简单，下面讨论几个问题：

块级元素、行内元素使用会有不同吗

限制的文本为数字，英文，中文会有不同吗

文本有多个连续空格会有问题吗

首先是块级和行内元素

         
            <div className='div'>
                <div className='style-1'>
                    <div>11111111111111111111111111111111</div>
                    <div>asdasdasdasdasdasdasdasdasdasdasdasdasd</div>
                    <span>asdasdasdasdasdasdasdasdasdasdasdasdasd</span><br/>
                    <span>111111111111111111111111111111111</span>
                </div>
            </div>
    
            .style-1 >div {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .style-1 >span {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

看下效果，好嘛块级元素有效，行内元素还是溢出屏幕了。这里行内元素无效的原因是行内元素设置不了具体宽度，块级元素虽然没设置宽度，但是其默认宽度是屏幕宽度所以限制有效。

行内元素width为'auto'（这里就不截图了）,这里建议即使有默认值也把宽度设上，不然哪天在外层加个position:'absolute'又会导致限制无效了

再试试把限制条件加在父标签

.style-1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.style-1 >div {
    /*white-space: nowrap;*/
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
}
.style-1 >span {
    /*white-space: nowrap;*/
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
}

结果：

嗯...把限制条件加在父标签（也可以是父标签的父标签）行内元素有效，块级元素虽然没有溢出屏幕但text-overflow: ellipsis;无效了。

显示文本为数字，英文，中文

对于单行限制 数字，英文都不会有什么问题，但是多行限制那可就出问题了

布局：

      <div className='div'>
                <div className='style-2'>
                    <div>滴答滴答滴答滴答滴答滴答滴答滴答滴答滴答滴答滴答滴答滴答滴答滴答</div>
                    <div>1111111111111111111111111111111111</div>
                    <div>asdasdasdasdasdasdasdasdasdasdasdasdasd</div>
                </div>
            </div>

样式：

.style-2 >div {
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    white-space: pre-wrap;
}

看到没，数字和英文没有换行，这时候就轮到word-break: break-all;上场了。

添加后

注意：这里word-break: break-all;和word-wrap: break-word;实现效果类似，具体区别参照张鑫旭大大的文章

文本有多个连续空格

这个就简单说一下，在没有连续空格时，你会发现white-space这个属性加不加展现的结果是一样的。但在有连续空格时， 不加此属性多个连续空格只会展示一个空位置，如果需要显示多个空位置，在限制单行是加上white-space: pre;限制多行时加上white-space: pre-wrap;