html的text里文字过长裁剪显示

最新推荐文章于 2022-09-29 12:05:35 发布

j20lin

最新推荐文章于 2022-09-29 12:05:35 发布

阅读量1.8k

点赞数

分类专栏： Html5 前端开发 web开发 html css

本文链接：https://blog.csdn.net/j20lin/article/details/66972795

版权

前端开发同时被 3 个专栏收录

71 篇文章 0 订阅

订阅专栏

Html5

36 篇文章 0 订阅

订阅专栏

web开发

30 篇文章 0 订阅

订阅专栏

实例

使用 text-overflow 属性：

<!DOCTYPE html>
<html>
<head>
<style> 
div.test
{
white-space:nowrap; 
width:12em; 
overflow:hidden; 
border:1px solid #000000;
}
</style>
</head>
<body>

<p>下面两个 div 包含无法在框中容纳的长文本。正如您所见，文本被修剪了。</p>

<p>这个 div 使用 "text-overflow:ellipsis" ：</p>

<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>

<p>这个 div 使用 "text-overflow:clip"：</p>

<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>

</body>
</html>

定义和用法

text-overflow 属性规定当文本溢出包含元素时发生的事情。

默认值：	clip
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.textOverflow="ellipsis"

语法

text-overflow: clip|ellipsis|string;

值	描述
clip	修剪文本。
ellipsis	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。

亲自试一试 - 实例

本例演示当光标浮动到元素上时如何显示全部文本。

<!DOCTYPE html>
<html>
<head>
<style> 
div.test
{
white-space:nowrap; 
width:12em; 
overflow:hidden; 
border:1px solid #000000;
}

div.test:hover
{
text-overflow:inherit;
overflow:visible;
}
</style>

</head>

<body>

<p>如果您把光标移动到下面两个 div 上，就能够看到全部文本。</p>

<p>这个 div 使用 "text-overflow:ellipsis" ：</p>

<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>

<p>这个 div 使用 "text-overflow:clip"：</p>

<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>

</body>
</html>

j20lin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html的text里文字过长裁剪显示

实例使用 text-overflow 属性： div.test{white-space:nowrap; width:12em; overflow:hidden; border:1px solid #000000;}下面两个 div 包含无法在框中容纳的长文本。正如您所见，文本被修剪了。这个 div 使用 "text-overflow:ellipsi
复制链接

扫一扫