弹性盒模型技巧和文字两行省略

在CSS中，flex: 1;是用于设置弹性容器（flex container）中的弹性子项（flex item）的属性。它是flex-grow, flex-shrink和flex-basis属性的简写形式。

flex-grow定义了弹性子项在可用空间中的扩展比例。默认值为0，表示不扩展。而当设置为1时，表示子项将按比例分配剩余空间，使其填充弹性容器。
flex-shrink定义了弹性子项在空间不足时的收缩比例。默认值为1，表示子项可以收缩。当设置为0时，表示子项不会收缩。
flex-basis定义了弹性子项在分配多余空间之前的初始大小。默认值为auto，表示由子项自身决定大小。

因此，flex: 1;表示弹性子项会根据可用空间进行等比例的扩展，并且可以收缩，初始大小由子项自身决定。这通常用于实现弹性布局中的均匀分布效果。

要在CSS中实现两行文字的省略号效果，你可以使用-webkit-line-clamp属性结合display: -webkit-box;和-webkit-box-orient: vertical;来实现。

下面是一个示例代码：

.ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 显示的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

然后，在HTML中将要应用省略号效果的文本元素添加.ellipsis类：

<p class="ellipsis">这是一段需要省略号的文本内容。</p>

这样，如果文本超过两行，就会显示省略号。请注意，这种方法只在WebKit浏览器（如Chrome、Safari）中有效，对于其他浏览器可能需要使用不同的实现方式

弹性盒模型技巧和文字两行省略

猜你喜欢