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

时间:2024-05-19 16:52:42

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

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;
}
 文字只显示一行,和文字只显示两行的问题