使用 text-overflow: ellipsis 实现溢出文本省略号显示

最新推荐文章于 2022-08-04 17:02:00 发布

背弃圣光

最新推荐文章于 2022-08-04 17:02:00 发布

阅读量771

点赞数

本文链接：https://blog.csdn.net/lyisray/article/details/18796103

版权

今天在做jsp页面展示的时候碰到一个实现溢出文本显示省略号的需求

原本使用js截取字符串然后判断字符串长度实现，不过相对比较繁琐，并且字符串长度不能自适应

听说用css的 text-overflow: ellipsis 也可以实现，于是尝试了下。

发现除了设置 text-overflow 属性为 ellipsis 外

还需要设置 white-space 属性为 nowrap （限制不换行）

和 overflow 属性为 hidden （隐藏溢出）

即设置样式 style="text-overflow:ellipsis; white-space: nowrap; overflow: hidden;" 后测试成功

相比js方式不仅简便了许多而且会根据元素的宽度自适应

IE 8+，chrome 30，火狐26，测试通过

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

背弃圣光

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

使用text-overflow:ellipsis实现溢出文本省略号显示无需js

09-25

总的来说，利用CSS的 `text-overflow: ellipsis` 以及相关的 `white-space` 和 `overflow` 属性，我们可以轻松地在不使用JavaScript的情况下实现文本溢出时的省略号显示，提高网页的性能和用户体验。同时，对于多行...

ie8及其以下版本兼容性问题之文本省略

yishuihan_001的博客

06-22

1005

ie8及其以下版本兼容性问题之文本省略

参与评论您还未登录，请先登录后发表或查看评论

CSS文本超出宽度显示省略号，点击“展开全部“则显示全部（兼容IE8）

F_family的博客

07-24

1180

<div id="box"> <p class="text">滚动位置滚动位置滚动位置滚动位置滚动位置滚动位置滚动位置</p> <span class="more">显示更多</span> </div> #box{ width: 200px; height: 35px; overflow: hidden; position: relative; }..

text-overflow: ellipsis; 溢出显示省略号

weixin_54274691的博客

08-04

121

关于超出溢出隐藏的笔记

走在路上的张先森

12-26

192

单行文本处理，这种使用的范围很广 overflow:hidden;text-overflow:ellipsis; //溢出用省略号显示white-space:nowrap; //溢出不换行多行的问题处理这种使用的情况也很多，例如下面这种新闻百科的简要浏览，既概览界面： overflow: hidden;text-overflow: ellipsis;display:-webki......

text-overflow属性的使用

Wu ShanShan的博客

03-12

2万+

text-overflow属性的使用 text-overflow属性规定了当文本溢出包含元素时所发生的事情。取值：当遇到标题过长，影响页面效果的情况时，text-overflow属性发挥它的作用，如下图所示：重点：利用text-overflow属性可以使标签内容在确定的长度内显示，剩余部分用“ … ”或者其他字符串代替。然而并不影响标签内部内容。下面...

使用text-overflow:ellipsis实现文字超出用省略号显示

09-25

当设置为 `ellipsis` 时，溢出的文本将以省略号的形式显示。结合上述三个属性，基本的CSS样式可以写为： ```css .element { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ``` 需要...

无js实现text-overflow: ellipsis; 完美支持Firefox

03-01

在前端开发中，文本溢出处理是一个常见的需求，特别是当我们在设计网页时，希望限制某段文字的显示长度，超出部分用省略号（...）表示。`text-overflow: ellipsis;` 是 CSS3 提供的一个样式属性，用于处理溢出的文本...

IE8/9 使用text-overflow: ellipsis 做块元素超长内容变省略号的问题

09-25

在CSS中实现文本溢出隐藏并显示省略号效果的基本方法如下： ```css overflow: hidden; /* 隐藏超出部分 */ white-space: nowrap; /* 保持文本在一行显示 */ text-overflow: ellipsis; /* 超出部分用省略号显示 */ `...

Uploadify 插件 “Call to SetButtonDisabled failed” 错误解决方法

lyisray的专栏

04-30

3398

根据文档使用 $('#file_upload').uploadify('disable', true)"

CSS 浅探flex布局中使用的overflow ，及width/height=0

japlus的博客

11-27

9593

w3school定义是： overflow:auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。对于overflow:auto的初级理解是，设置父元素height/width，若子元素溢出，则自动显示纵向/横向滚动条。 .........

jsp页面文字不显示省略号_表格单元格内容超出时显示省略号效果(实现代码)

weixin_36450655的博客

01-14

628

说明在前端开发中，经常会遇到需要限制单元格宽度并且内容超出部分显示省略号的的情况。下面就简单的介绍下如何达到这种效果。准备知识1. 控制文本不换行white-space: nowrap;2. 超出长度时，出现省略号overflow:hidden;text-overflow:ellipsis3. 修改表格布局算法table-layout:fixed;table-layout的默认值为automati...

CSS3 超出文本用省略号显示text-overflow：ellipsis

weixin_51109349的博客

10-21

335

单行隐藏多行隐藏 <!DOCTYPE html> <html> <head> <style> div.test { white-space:nowrap; width:12em; overflow:hidden; border:1px solid #000000; } </style> </head> <body> <p>这个 div 使用 "text-overflow:ellipsis" ：&l

第五天文本溢出

weixin_34253126的博客

02-17

212

关于溢出: 1、溢出属性（容器的） overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit; visible:默认值，内容不会被修剪，会成现在元素框之外； hidden：内容会被修剪，并且其余内容是不可见的； scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容; auto：如果内容被修剪，则浏览器会显示滚动条，以...

java中页面显示文字过长用点显示_CSS样式解决文字过长显示省略号问题

weixin_42715608的博客

02-17

480

一、CSS样式解决文字过长显示省略号问题1、一般样式一般 css 样式，当宽度不够时，可能会出现换行的效果。这样的效果在某些时候肯定是不行的，可以修改 css 样式来解决这个问题。text-overflow.demo-split {width: 500px;height: 100px;border: 1px solid #dcdee2;background: palegreen;}.demo-s...

字符溢出省略 ellipsis

saber_H的博客

06-16

103

div { width: 200px; height: 50px; border: 1px solid; white-space: nowrap; // 不换行 overflow: hidden; // div 溢出隐藏 text-overflow: ellipsis; // 文本省略加点 } a { text-decoration: none; }

文字超出div，设置text-overflow:ellipsis不起作用问题