文字只显示一行，和文字只显示两行的问题

在我们设置样式的时候，不可避免的涉及到内容只出现一行或只出现自己想要的行数。

1.首先说一行的问题。

<div class="outer">

如果内容超出，还会看到现在的内容吗？哒哒哒哒哒

</div>

.outer {

width: 200px;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

 

详解：overflow:hidden;这个就不用多说了，超出的部分隐藏。还可以用于清除浮动(不建议使用)。

　　　text-overflow:ellipsis;超出的部分用...来显示

　　　white-space:nowrap;这个东东曾经让我很迷糊。对此我专门进行了一番修炼。

　　　 white-space

　　首先先看一下菜鸟教程里面的讲解

 

 大家可能会迷糊，什么是空白？？空白也就是我们在编译器里面打出的空格，或者缩进，总之就是没有内容的部分。

我们一个个举栗子！

以下面的文本结构作为例子

white-space:normal;显示的就是默认样式

white-space: pre;这个不仅不换行，还会把空白的部分显示在页面中。头很铁！

 

white-space:nowrap;不会换行，但是没有空白部分。

剩下的就不一一实验了。大家可以试一下看看效果。

一行显示的结果将会是这样的。

 

 

 

2.如果想要显示两行怎么办？

还是用上面的文本内容

.outer {

overflow: hidden;

text-overflow: ellipsis;

/*设置成弹性盒子 */

display: -webkit-box;

/*显示的个数 */

-webkit-line-clamp: 2;

/* 属性规定框的子元素应该被水平或垂直排列。 */

-webkit-box-orient: vertical;

}

 

 

转载于:https://www.cnblogs.com/chinabin1993/p/7230459.html