如何实现CSS限制字数,超出部份显示点点点...

Love The Way You Lie 2022-04-17 01:30 141阅读 0赞

<div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1px solid red">试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看</div>

效果：

![69bfcce2-893a-3368-9d50-7c072952c5b1.jpg][]

语法：

text-overflow : clip | ellipsis

参数：

clip : 　不显示省略标记（...），而是简单的裁切

（clip这个参数是不常用的！）

ellipsis : 　当对象内文本溢出时显示省略标记（...）

说明：

设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。

请您注意，text-overflow:ellipsis属性在FF中是没有效果的。

示例：

div \{ text-overflow : clip; \}

text-overflow是一个比较特殊的样式，我们可以用它代替我们通常所用的标题截取函数，而且这样做对搜索引擎更加友好，如：标题文件有50 个汉字，而我们的列表可能只有300px的宽度。如果用标题截取函数，则标题不是完整的，如果我们用CSS样式text- overflow:ellipsis，输出的标题是完整的，只是受容器大小的局限不显示出来罢了。

text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省 略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样 才能实现溢出文本显示省略号的效果。

有的时候的某段文本太长了，会影响整个的布局，很多人用动态语言来解决这个问题，但必须区分中文和英文，因为中文相当于两个英文字符长度，这样不仅繁琐，而且加重了服务器的负担。其实，我们完全可以使用CSS完美解决这个问题，

white-space:nowrap;overflow:hidden;text-overflow:ellipsis;  <!-- 就这三句,,,嘿嘿....->

[69bfcce2-893a-3368-9d50-7c072952c5b1.jpg]: /images/20220417/bec8aad5cfca4ef0a4ccd74b39e39956.png

发表评论取消回复

表情：

评论列表（有 0 条评论，141人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS实现超出一定行数后省略文字并显示点点点

单行省略： width:100%; white-space:nowrap; overflow:hidden; ...

- 日理万妓/ 2024年04月18日 13:12/ 0 赞/ 51 阅读

相关【CSS用法】css限制一行文字数量，超出部分用省略号显示

为了保证页面的整洁美观，在很多的时候，我们常需要隐藏超出长度的文字。这在列表条目，题目，名称等地方常用到。 > CSS代码： > > text-overflow:ellip

向右看齐/ 2022年12月21日 00:57/ 0 赞/ 237 阅读

相关 css实现内容超出显示省略号

1.多行超出显示省略号 display: -webkit-box; -webkit-box-orient: vertical; -webkit-lin

港控/mmm°/ 2022年12月11日 02:25/ 0 赞/ 218 阅读

相关 css之限制文本行数，超出部分显示 “...“

![实例!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20200831165220554.png\pic\_center)!\[在这里插

淡淡的烟草味﹌/ 2022年12月03日 01:37/ 0 赞/ 199 阅读

相关 jsp:超出字数显示省略号；鼠标悬停显示完整文本

\\ 一. 需求： \\ 列表页中，控制某一列中的文字显示：只显示前16个字符，超出部分用省略号代替。当鼠标悬停时，显示该列的全部内容。 \\ 二. 解决方案

朴灿烈づ我的快乐病毒、/ 2022年06月12日 07:08/ 0 赞/ 744 阅读

相关 textarea字数限制

<script type="text/javascript"> function collect\_submit() \{ var len = $(".describe

Dear 丶/ 2022年06月08日 13:57/ 0 赞/ 223 阅读

相关 angular限制字符超过一定的字数隐藏字数显示省略号

自定义一个过滤器 js代码 function CarouselContentFilter ( ) { return function (str)

朱雀/ 2022年05月15日 07:53/ 0 赞/ 235 阅读

相关如何实现CSS限制字数,超出部份显示点点点...

<div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;

Love The Way You Lie/ 2022年04月17日 01:30/ 0 赞/ 142 阅读

相关 Android中EditText超出字数限制添加用户提示

当我们在Editext输入内容的时候，检测如果超过限制的长度无法输入内容，并且给用户提示。首先我想到了下面的方法： editText.addTextChanged

末蓝、/ 2022年03月18日 15:29/ 0 赞/ 203 阅读

相关 css只能显示两行，超出两行用点点点表示，css溢出

这个属性想设置超出几行，就写几，如上是超出6行，超出的用点点点表示 text-overflow: -o-ellipsis-lastline;overflow: hid

待我称王封你为后i/ 2021年10月18日 23:38/ 0 赞/ 764 阅读