CSS text-overflow属性用法及代码示例

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

此属性本身不起作用。我们必须使用 white-space:nowrap;和溢出：隐藏；有了这个属性

用法

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

属性值

clip:它是剪切溢出文本的默认值。它在内容区域的限制处截断文本，以便它可以截断字符中间的文本。

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

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

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

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

示例

<!DOCTYPE html>
<html>
<head>
<style>
div{
white-space:nowrap;
height:30px;
width:250px;
overflow:hidden;
border:2px solid black;
font-size:25px;

}
.jtp{
text-overflow:clip;
}
.jtp1 {
text-overflow:ellipsis;
}

h2{
color:blue;
}
div:hover {
overflow:visible;
}
p{
font-size:25px;
font-weight:bold;
color:red;
}
</style>
</head>
<center>
<body>
<p> Hover over the bordered text to see the full content. </p>

<h2>
text-overflow:clip;
</h2>

<div class="jtp">
Welcome to the javaTpoint.com
</div>
<h2>
text-overflow:ellipsis;
</h2>

<div class="jtp1">
Welcome to the javaTpoint.com
</div>
</center>
</body>
</html>

输出

示例

在此示例中，我们使用省略号并继承 text-overflow 属性的值。我们在一个 div 元素上应用了 text-overflow:ellipsis；在 div 中，有一个段落元素，我们在该元素上应用了 text-overflow:inherit；财产。

我们可以通过将鼠标悬停在元素上来查看完整内容。当我们悬停段落元素的内容时，div 元素的内容将自动可见，因为段落元素是 div 元素的子元素。

<html>

<head>
<title>
CSS text-overflow Property
</title>
<style>
div {
width:250px;
font-size:20px;
white-space:nowrap;
border:2px solid red;
overflow:hidden;
text-overflow:ellipsis;
}
h1, h4{
color:red;
}
p{
white-space:nowrap;
overflow:hidden;
text-overflow:inherit;
}
div:hover{
overflow:visible;
}
p:hover{
overflow:visible;
}
</style>
</head>

<body>
<h1> Hover over the text to see the full content </h1>
<div>
<h4> text-overflow:ellipsis; </h4>
Welcome to the javaTpoint.com
<h4> text-overflow:inherit; </h4>
<p>
This paragraph inherited the value from its parent div element.
</p>
</div>
</body>

</html>

输出

将鼠标移到元素上时，输出将是 -

相关用法

注：本文由纯净天空筛选整理自 CSS text-overflow property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。