关于文本内容溢出的处理

属性：

1. display: -webkit-box;:

   • 这是一个 WebKit 浏览器特有的属性，用于将元素设置为弹性盒子（flexbox）布局。
   • 它允许使用弹性盒子的特性来布局子元素。
   • 在现代浏览器中，可以使用 display: flex; 来代替。

2. -webkit-box-orient: vertical;:

   • 这是一个 WebKit 浏览器特有的属性，用于设置弹性盒子的主轴方向为垂直方向。
   • 也就是说，子元素将垂直排列，从上到下。
   • 在现代浏览器中，可以使用 flex-direction: column; 来代替。

3. -webkit-line-clamp: 3;:

   • 这是一个 WebKit 浏览器特有的属性，用于限制文本的显示行数。
   • 你可以设置一个整数值来指定最大显示行数。
   • 当文本超过指定的行数时，多余的内容将被截断。
   • 注意，这个属性只适用于单行文本。

4. text-overflow: ellipsis;:

   • 这个属性用于控制文本的溢出效果，当文本内容超出容器宽度时。
   • ellipsis 值表示使用省略号（...）来表示被截断的文本。
   • 要使 text-overflow: ellipsis; 生效，必须设置以下两个属性：
     • white-space: nowrap;：防止文本换行。
     • overflow: hidden;：隐藏溢出的部分。

注意，-webkit-box-orient 和 -webkit-line-clamp 是 WebKit 浏览器特定的属性，可能在其他浏览器中不起作用。在现代浏览器中，建议使用标准的 display: flex; 和 flex-direction: column; 以及其他适用的 CSS 属性来实现相似的布局和截断效果。

 

overflow:hidden 设置溢出隐藏

 

 

 

display: -webkit-box;: 设置元素的显示方式为弹性盒子（flexbox）布局。
-webkit-box-orient: vertical;: 设置弹性盒子的主轴方向为垂直方向。

 

text-overflow 属性通常不适用于弹性布局（flexbox）。text-overflow: ellipsis; 是设计用于普通块级元素的，用于处理文本内容超出容器宽度时的省略号显示。然而，在弹性布局中，它不会自动应用省略号效

 

 

white-space: nowrap; 是一个 CSS 属性，用于控制文本的空白符处理方式，其中 nowrap 值用于防止文本换行。它的作用是将文本强制在一行内显示，不允许换行。

当应用 white-space: nowrap; 属性时，以下效果会发生：

文本不会被自动分割成多行，而是被强制放在一行内。

如果文本内容超出容器的宽度，则文本将溢出容器，并不会自动换行。

 

这个属性通常与 overflow: hidden; 和 text-overflow: ellipsis; 一起使用，以实现在超出容器宽度时隐藏溢出文本并显示省略号的效果。

-webkit-line-clamp 属性可以用于限制弹性和非弹性布局中的文本行数。然而，需要注意的是，-webkit-line-clamp 属性只在一些 WebKit 浏览器（例如 Chrome 和 Safari）中被支持，并且仅适用于单行文本。

对于弹性盒子布局，text-overflow: ellipsis; 无法直接实现省略号的效果。