CSS 文本溢出属性

CSS 的 text-overflow 属性用于设置显示信息并隐藏其他标签信息。如果数据溢出了标签，那么 CSS 将使用 text-overflow 属性来隐藏多余的字符。white-space 属性设置为 now-wrap 值，text-overflow 属性设置为 hidden 值。溢出的内容将被裁剪，显示为省略号字符串或其他格式。

语法

以下语法展示了 CSS text-overflow 属性及其不同的值。

支持的浏览器

css text overflow 所支持的浏览器如下所示：

• 谷歌浏览器
• 边
• 火狐
• Internet Explorer
• Opera
• Safari

CSS Text-overflow Clip 格式

clip 是 text-overflow 属性的默认值。它有助于裁剪数据并显示可见的数据。

语法

以下语法展示了带有 clip 值的 text-overflow。

示例

此示例展示了数据 clip 值的基本 text-overflow。它是 text-overflow 的默认值。

输出

输出显示了带有数据的 text-overflow 属性。

CSS Text-overflow Ellipsis 格式

ellipsis 值会隐藏数据，并用点号格式显示隐藏的数据。隐藏的值将显示为三个点“…”符号。

语法

以下语法展示了带有 ellipsis 值的 text-overflow。

示例

此示例展示了数据 ellipsis 格式的基本 text-overflow。

输出

输出显示了带有数据的 text-overflow 属性。

CSS Text-overflow Initial 格式

initial 值会裁剪数据，并且不显示隐藏的值。

语法

以下语法展示了带有 initial 值的 text-overflow。

示例

此示例展示了数据 initial 格式的基本 text-overflow。

输出

输出显示了带有数据的 text-overflow 属性。

CSS Text-overflow Inherit 格式

text-overflow 属性继承格式来裁剪数据。它与父元素的取值一起工作。当属性从父元素继承时，它使用 inherit 格式。

语法

以下语法展示了带有 inherit 值的 text-overflow。

示例

此示例展示了数据 inherit 格式的基本 text-overflow。隐藏的值将显示为三个点“…”符号。

输出

输出显示了带有数据的 text-overflow 属性。

CSS Text-overflow String 格式

text-overflow 属性在字符串格式中用于裁剪数据。我们可以用字符串来隐藏信息。

语法

以下语法展示了带有 string 值的 text-overflow。

示例

此示例展示了数据 string 格式的基本 text-overflow。我们可以根据用户格式设置字符串，或者将其设置为空字符串。

输出

输出显示了带有数据的 text-overflow 属性。

结论

text-overflow 属性以较小的尺寸显示数据并隐藏其他信息。此 CSS 属性用于表格、表单和其他与数据库相关的信息页面。