CSS控制文本内容长度，溢出追加省略号

最新推荐文章于 2021-11-29 21:03:20 发布
最新推荐文章于 2021-11-29 21:03:20 发布
阅读量590 收藏
点赞数 1
分类专栏： CSS 文章标签： css 服务器 ie

在文本内容显示时长度受到限制的情况下，往往我们采用的是通过服务器端对显示的内容进行截取的方法来实现溢出的部分隐藏掉，并加上省略号。
      今天我给大家介绍一种通过css来实现的方法。（IE和FF还有点区别）
      
在IE下使用的是overflow: hidden;text-overflow: ellipsis;来实现溢出的部分用省略号。
在FF下使用的是p:after{content:"...";}
演示地址：演示

f371879711
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 文本过长 处理 溢出隐藏显示省略号
qq_44766377的博客
07-05 132
文本溢出隐藏显示省略号
css实现超出div长度文字自动隐藏或用省略号表示
chelflan's blog
07-23 3万+
在网页设计中，一些区域的标题文字是不能换行的，例如首页显示的文章标题，因为布局是固定的，换行会打乱布局，从而使网页产生错位。因此，我们需要一行一段文字，超出行宽的文字用省略号表示或者直接去掉不用省略号代替。看看下图中的实例。超出div长度用省略号表示上图显示，扩展阅读的文章标题，超出行宽用省略号表示。本文我们就来看看如何用css来实现的。css实现超出div长度用省略号表示源代码...
笔记：css能做到文本超出第二行显示省略号
蚁族的奋斗的博客
10-11 363
.ellipsis{ width:100px; overflow : hidden;/*必须结合的属性,当内容溢出元素框时发生的事情*/ text-overflow: ellipsis;/*可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/ display: -webkit-box;/*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/ ...
CSS3控制文字只显示一行超出部分显示省略号
{丸の子}
08-08 2077
在编写网页的时候，我们希望文字不换行，特别是在新闻列表的时候，文字多了就添加省略号，不用程序去判断字符，英文和汉字的字符数量是不对应的，一个汉字占两个英文字符的位置，如果一行出现了英文字符，裁切就不准确了，不过用css可以办到控制文字只显示一行，超出部分显示省略号，如果需要强制换行，看最后 首先来看一个例子： [code="html"] 省略我吧！ 省略我吧！ 省略我吧！ 省略我吧...
css限制显示字数，文字长度超出部分用省略号表示
热门推荐
OrangeJuiceMe
03-09 8万+
为了保证页面的美观整洁，在文字太多的时候，我们常需要隐藏超出长度的文字。在题目，名称，列表条目等地方常用到。 (1).html中文字超出一行，省略超出部分，显示'...' 如果这种情况比较多，可以取一个切合作用的类名用于复用。 .line-limit-length { overflow: hidden; text-overflow: ellipsis; white-space: now
css实现文本溢出显示省略号
09-25
主要介绍了css实现文本溢出显示省略号的方法和示例分享，推荐给大家。
CSS控制文本的长度 超过一行显示省略号的实现方法
09-24
CSS 提供了一种优雅的方式来处理这种情况，即控制文本的长度，当文本超过设定的宽度时，显示省略号。这种方法通常用于标题或者摘要，使得用户能够快速了解主要内容，而不必展开全部文本。本篇文章将详细解释如何通过...
css多行文本溢出时出现省略号的示例
09-24
当文本内容过多，无法在指定的容器内完全展示时，可以使用CSS技术来实现多行文本溢出时显示省略号的效果。这既保持了设计的整洁性，又确保了主要内容的可读性。本文将介绍两种实现这一效果的方法。 方法一：CSS技巧...
css控制文本实现越界省略号以及自动换行
09-25
在CSS（层叠样式表）中，控制文本的显示方式是一项重要的任务，特别是当文本内容过多，需要在有限的空间内展示时。本篇将详细解释如何利用CSS实现文本的越界省略号显示以及自动换行。 首先，我们来看如何实现越界...
css,js文本长度变...省略号
一袋米要扛几楼_
05-28 3737
文章目录css文本超出变...省略号js文本超出变...省略号 css文本超出变…省略号 单行文本 .ellipsis{ width:200px;/*必须是固定宽度值*/ overflow:hidden;/*超出部分隐藏*/ text-overflow:ellipsis;/*超出部分显示省略号*/ white-space:nowrap;/*规定段落中的文本不进行换行 */ ...
数组长度溢出—java异常集锦（1）
nihaixiao的博客
09-20 635
1.数组的长度溢出 应该把等号去掉
CSS文本溢出显示省略号
weixin_30706507的博客
12-30 278
项目中常常有这种需要我们对溢出文本进行"..."显示的操作，单行多行的情况都有（具体几行得看设计师心情了），这篇随笔是我个人对这种情况解决办法的归纳，欢迎各路英雄指教。 单行 语法 overflow:hidden; text-overflow:ellipsis; white-space:nowrap 示例 文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号 多行 ...
div css 多行文本 最后一行自动显示省略号
qq_15804925的博客
11-30 2333
div{display: -webkit-box;text-overflow: ellipsis;overflow : hidden;text-overflow: ellipsis;-webkit-line-clamp: 3;-webkit-box-orient: vertical;} -webkit-line-clamp: 3;这个设置为显示3行，超过3行则最后用省略号代替，目前在移动设备上使
css 元素溢出 & css 显示特性
风口IT猪的成长录
11-29 1868
css 元素溢出 & css 显示特性css 元素溢出1. 什么是 css 元素溢出2. 示例代码3. 小结css 显示特性1. display 属性的使用2. 示例代码3. 小结 css 元素溢出 学习目标 能够说出元素溢出的解决办法 1. 什么是 css 元素溢出 当 子元素(标签)的尺寸超过父元素(标签)的尺寸时，此时需要设置父元素显示溢出的子元素的方式，设置的方法是通过 overflow属性来完成。 overflow 的设置项： visible 默认值, 显示子标签溢出部分。 hid
css控制文本最后一行,使用CSS调整文本的最后一行
weixin_29607511的博客
08-04 3318
我有一个CSS帮助程序类，用于强制最后一行“文本”(或用于预期用法，内联块div)成为对齐对齐以及其余的人。使用CSS调整文本的最后一行下面是我得到了代码：.justify-all-lines{text-align: justify;/* IE-only properties that make the :after below unnecessary (we need this because ...
字节长度与数据溢出
Mormont的博客
11-05 1888
字节长度就是一个变量所占的内存空间的大小。数据有着不同的数据类型，不同的数据类型会分配不同的空间大小。在c语言中有字节，半字，字三种存储数据的单位，其关系是 1个字=4个字节=32位，一个半字=2两个字节=16位，一个字节=8位。 int                  4 字节                      char                 1字节 short    
设置当内容超出div（文字长度超出div宽度）出现滚动条
XCMercy
01-15 5万+
当内容超出div时，自动出现滚动条的条件 内容必须在div中 div要设置宽高 overflow设置为auto 备注 overflow:auto;当内容宽度超出div宽度，或者内容高度超出div宽度，或者同时超出，会自动出现水平、或者垂直、或者水平和垂直滚动条。 overflow-x:auto;当内容宽度超出div宽度，自动出现水平滚动条 overflow-y:auto;当内容宽度...
前端基础（5）：页面重构与文本溢出
Quick_only的博客
08-28 518
一、溢出属性（容器） overflow:visible/hidden/scrol/auto/inhert; 说明： visible:默认值 hidden：内容被修剪，并且其与内容不可见； scroll：内容被修剪，浏览器显示滚动条，以便查看其余内容； auto：如果内容被修剪，浏览器显示滚动条，以便查看其余内容； inherit：从父元素继承overflow属性值； 二，空余空间 white-space:normal/nowrap/pre/pre-line/inherit; 说明： normal：默认值
INT 类型长度溢出缺陷
Laotu's blog, Now Or Never, Always On The Road
01-10 3574
INT类型长度溢出
css 多行文本溢出显示省略号
最新发布
09-15
要实现多行文本溢出显示省略号，你可以使用CSS的`text-overflow`和`-webkit-line-clamp`属性结合使用。 首先，你需要设置文本容器的高度和行数限制。例如，将容器高度设置为固定值，并使用`-webkit-line-clamp`属性指定最大行数： ```css .text-container { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; /* 显示的最大行数 */ max-height: 3em; /* 每行的高度 */ } ``` 然后，你需要确保文本容器内的文本不会换行，可以使用`white-space: nowrap`属性： ```css .text-container { white-space: nowrap; } ``` 这样就可以实现多行文本溢出时显示省略号。请注意，这种方法在部分浏览器上可能需要添加前缀`-webkit-`以实现兼容性。 另外，如果你希望在多行文本溢出时同时显示省略号和完整文本提示，你可以结合使用`::after`伪元素来创建提示内容。例如： ```css .text-container::after { content: "..."; /* 省略号 */ } ``` 希望这可以帮助到你！如有更多问题，请继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值