CSS 文本溢出处理（单行和多行）

已于 2022-06-02 22:40:29 修改
阅读量1.3k 收藏
点赞数
分类专栏： 前端零零散散 文章标签： css css3 html
于 2021-12-18 18:37:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/http____/article/details/122015490
版权
本文介绍了CSS中处理文本溢出的方法，包括单行文本的处理，利用`text-overflow`、`overflow`和`white-space`属性来控制显示和隐藏多余文本；以及多行文本溢出的解决方案，通过`line-clamp`属性限制显示的文本行数，并结合`display`和`flex`属性实现效果。
摘要由CSDN通过智能技术生成

文章目录

1 单行文本

html：

<span>单行文本溢出处理</span>

css：

span{
   

	display: inline-block;

	width: 100px;

	overflow: hidden;
最低0.47元/天 解锁文章
不知-_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html span 多行文本,单/多行文本添加省略号方法详解
weixin_30491017的博客
06-17 2484
1.单行文本添加省略号一般用于新闻列表展示li{width: 200px;height: 30px;line-height: 30px;cursor: pointer;list-style-position: inside;/*将列表图标位置设置为inside，默认outside，overflow值为hidden时会截取掉*/overflow: hidden;text-overflow: elli...
CSS实现单行、多行文本溢出显示省略号（…）
07-26
CSS实现单行、多行文本溢出显示省略号（…）示例文档，自行下载查看
text-overflow: ellipsis；单行，多行文本溢出显示 . . .
热门推荐
前端小狮的博客
04-11 3万+
常见的单行文本溢出显示省略号 写法：text-overflow: ellipsis;overflow: hidden;white-space: nowrap; &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/ti..
CSS布局中的溢出问题及解决方法
最新发布
Lesleyhnj的博客
07-05 280
通过合理使用CSS的overflow属性和响应式设计技术，可以有效解决网页布局中的内容溢出问题，提升用户体验和页面的功能性。
span标签内内容过多如何实现自动换行，且限制最多行数
Sun的博客
07-13 4005
span标签内内容过多如何实现自动换行，且限制最多行数
超实用, 用CSS实现多行文本溢出
weixin_42657666的博客
03-15 4577
用CSS实现文本溢出省略 在网页开发过程中，经常会遇到文本内容太长而导致界面布局不美观的情况。此时，我们需要对文本进行省略处理，以达到理想的布局效果。本文将介绍一个使用CSS实现文本溢出省略的方法。 方法一：使用text-overflow属性 text-overflow属性是CSS3新增的一个属性，它用于设置文字内容超出其容器时如何显示。通过设置text-overflow: ellipsis;即可实现文本溢出省略的效果，其中“ellipsis”表示显示为省略号。 下面是一个例子： div { width
多行文本溢出显示省略号(…) text-overflow: ellipsis
weixin_30808575的博客
08-05 329
关于text-overflow text-overflow属性规定当文本溢出包含元素时发生的事情。 默认值： clip 继承性： no 版本： CSS3 JavaScript 语法： object.style.textOverflow="ellipsis" 语法：text-overflow: clip|ellipsis|string; ...
text-overflow:ellipsis在多行的实现
wang_liuyong的博客
07-22 8934
以下代码实现了指定最多显示4行，超过4行的字，用…代替。 &lt;div class='wrapper'&gt; &lt;p class='text'&gt;要指定行数的文本内容&lt;/p&gt; &lt;/div&gt; .text{ overflow: hidden; text-overflow: ellipsis; display: -webki...
CSS处理多行文本溢出
weixin_45498504的博客
05-25 482
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。 实现方法： overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 效果如图： 但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。 接下来重点说一说多行文本溢出显示省略号，如下。 实现方法： display:-webkit-box; -we...
CSS实现单行、多行文本溢出显示省略号的实现方法
09-22
在CSS中，实现文本溢出时显示省略号的方法分为单行文本溢出和多行文本溢出两种情况。这两种效果可以有效地处理页面内容超出预设区域时的显示问题，增强用户界面的整洁性。 一、单行文本溢出显示省略号 对于单行...
CSS实现单行、多行文本溢出显示省略号的实现方法.docx
11-26
CSS 提供了一些技巧来处理文本溢出的情况，使我们能够优雅地显示单行或多行文本的省略号。以下是对"CSS实现单行、多行文本溢出显示省略号的实现方法"的详细说明： **单行溢出** 单行溢出的实现主要是通过限制文本...
CSS实现单行、多行文本溢出显示省略号的实现方法.pdf
11-26
这里我们将详细介绍如何使用CSS实现单行和多行文本溢出时显示省略号。 首先，我们来看单行文本溢出的实现。当需要对单行文本进行截断时，可以使用以下CSS样式： ```css { width: xxpx; /* 定义一个宽度 */ ...
BInyLU#blognews#CSS实现单行、多行文本溢出显示省略号（…）1
07-25
实现方法：效果如图：但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。实现方法：效果如图：适用范围：该方法适用范围广，但文字未
CSS单行和多行文本溢出的实现方案
qq_42544728的博客
10-18 2100
的CSS拓展属性，因此该方法属性可以适用于。：使用范围，由于使用了。
span文本溢出显示...及span换行
weixin_46867950的博客
06-17 4737
span标签中实现换行 sapn{ word-break: normal; display: block; white-space: pre-wrap; word-wrap: break-word; overflow: hidden; width: 20%; } white-space： 通过HTML文档的源代码排版方式控制页面显示文本的排版方式 取值：normal|pre|nowrap|pre-wrap|pre-line|inherit normal:正常无变化（
css文本溢出处理——单行、多行
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
01-02 7302
主要介绍文本溢出时的处理方式及实现单行缩略、多行缩略、展开/收起文本功能。
css设置文本溢出问题（ span ）
ly_solo的博客
05-14 4361
最后，因为只有块级元素才能设置宽和高，而span是行内元素，要转换成块级元素用代码display:block。1/ 溢出隐藏必须有overflow:hidden;2/溢出隐藏必须设置元素的宽和高，当超出范围是，才会隐藏3/只有块块级元素才能设置宽和高，而span是行内元素，要转换成块级代码display:block;下面代码是对&lt;span&gt;元素设置的代码，效果如下图&lt;span ...
css实现单行和多行文本溢出显示省略号问
08-23
可以使用CSS的text-overflow属性来实现单行和多行文本的溢出显示省略号。 对于单行文本溢出显示省略号，可以使用以下样式： ```css .single-line { white-space: nowrap; /* 让文本不换行 */ overflow: hidden; /* 隐藏溢出部分的文本 */ text-overflow: ellipsis; /* 显示省略号 */ } ``` 对于多行文本溢出显示省略号，可以结合使用CSS的属性-webkit-line-clamp和display: -webkit-box来实现： ```css .multi-line { display: -webkit-box; /* 将容器视为一个弹性伸缩盒子 */ -webkit-line-clamp: 3; /* 最多显示3行文本 */ -webkit-box-orient: vertical; /* 设置伸缩盒子的子元素垂直排列 */ overflow: hidden; /* 隐藏溢出部分的文本 */ text-overflow: ellipsis; /* 显示省略号 */ } ``` 以上代码中的`.single-line`和`.multi-line`分别是要应用样式的文本容器的类名。根据需要，你可以将这些样式类应用到相应的HTML元素上。 注意：`-webkit-line-clamp`属性在一些浏览器（例如Chrome和Safari）中可以正常工作，但在其他浏览器中可能不起作用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不知-_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值