📜  CSS text-overflow属性

📅  最后修改于: 2020-11-05 02:16:50             🧑  作者: Mango

CSS text-overflow属性

此属性指定溢出文本的表示形式,用户看不到。它向用户发出有关不可见内容的信号。此属性有助于我们确定是否应剪切文本,显示一些点(省略号)或显示自定义字符串。

此属性不能单独工作。我们必须使用空格:nowrap;和溢出:隐藏;具有此属性

句法

text-overflow: clip | ellipsis | string | initial | inherit;  

属性值

clip:这是剪切溢出文本的默认值。它会在内容区域的边界处截断文本,以便可以截断字符中间的文本。

ellipsis:此值显示省略号(?)或三个点以显示剪切的文本。它显示在该区域内,减少了文本量。

string:用于使用程序员选择的字符串向用户表示剪切后的文本。它仅在Firefox浏览器中有效。

initial:将属性设置为其默认值。

inherit:它从其父元素继承属性。






Hover over the bordered text to see the full content.

text-overflow: clip;

Welcome to the javaTpoint.com

text-overflow: ellipsis;

Welcome to the javaTpoint.com

输出量

在此示例中,我们使用省略号并继承text-overflow属性的值。我们在上面应用文本溢出的div元素:省略号;在div内,有一个段落元素,我们在上面应用文本溢出:属性。

我们将鼠标悬停在元素上可以看到全部内容。当我们将段落元素的内容悬停时,由于段落元素是div元素的子元素,因此div元素的内容将自动可见。





CSS text-overflow Property





Hover over the text to see the full content

text-overflow: ellipsis;

Welcome to the javaTpoint.com

text-overflow: inherit;

This paragraph inherited the value from its parent div element.

输出量

将鼠标移到元素上时,输出将为-