通过CSS样式控制不换行，超出部分用省略号代替

已于 2024-04-22 15:04:16 修改
阅读量618 收藏
点赞数 4
文章标签： css 前端
于 2024-04-22 15:03:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/panghuangang/article/details/138077010
版权
本文介绍了在前端开发中，如何通过CSS的white-space,overflow和text-overflow属性来控制文本溢出并实现省略号显示，帮助开发者优化内容布局。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

如下所示，如果每行文本长度超过一行会换行：
在这里插入图片描述

如果不想换行，超出部分用省略号代替，可以采用如下的CSS样式控制：

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

样式应用后，效果如下所示：
在这里插入图片描述

CSS设置溢出不换行
2301_79326857的博客
09-29 981
默认情况下，overflow属性的值为"visible"，即允许内容溢出并显示在容器之外。然而，如果我们希望溢出的内容不换行，可以使用其他属性值。通过使用CSS的overflow属性，我们可以根据需要控制溢出内容的显示方式。这样，即使容器中的文本内容很长，我们也能够控制其不换行并提供合适的用户体验。在网页开发中，有时我们需要处理长文本或容器中的内容超出其指定的尺寸。为了避免内容溢出容器并换行显示，我们可以使用CSS属性来控制溢出的显示方式。当容器中的文本内容超出容器的尺寸时，
CSS超出文本指定宽度用省略号代替和文本不换行
09-24
本文将深入探讨如何使用CSS实现超出文本指定宽度用省略号代替以及禁止文本换行。 1. **一般文字截断** 当我们希望文本在特定宽度后被截断并用省略号表示时，可以使用以下CSS样式： ```css .text-overflow { ...
css设置文字不换行，超过的部分用“...”代替
MangoNiki
02-24 754
设置文字不换行，超过的部分用“…”代替 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 210px;除width属性外，顺序不要颠倒哦！
CSS：换行与不换行
最新发布
weixin_46001736的博客
04-03 1572
CSS：换行与不换行
css设置不换行超出显示省略号
weixin_57964731的博客
10-17 892
这样，如果文本的长度超过了容器的宽度，超出部分就会显示为省略号。
CSS设置文本不换行多余文字显示省略号
m0_58348743的博客
11-02 7144
【代码】CSS设置文本不换行多余文字显示省略号。
CSS中设置了宽度，但是其中的内容溢出而不换行
cheng1a的博客
01-17 3593
当我们为div标签或者p标签等设置了宽度，会出现文本溢出并且不会换行的情况，一般这种情况都是只有文本内容为单词或者纯数字的时候出现的。原因是由于：浏览器在解析我们页面的时候，给这一串数字当成一个词了，这样就不会自动切断字符串而进行换行。：内容到达指定宽度强行断句换行，一个单词显示不开将会截断换行继续展示；：当前单词在宽度内无法展示，整个单词换行展示；会将单词截断换行显示；
【10】css设置文字不换行，超过的部分用“...”代替
weixin_34381666的博客
07-27 1388
设置文字不换行，超过的部分用“...”代替 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:210px; 除width属性外，顺序不要颠倒哦！ 1.white-space ① normal 默认，空白会被浏览器忽略 ② pre 空白会被浏览器保留。其行为方式...
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
10-20
在本文中，我们将探讨如何使用JavaScript和CSS技术实现当网页中的文本内容超出设定的长度时，自动用省略号(...)来代替超出部分，并且当用户将鼠标悬停在该文本上时，显示完整的文本信息。这通常是在网页设计中用来...
CSS文本超出div或者span时用省略号代替
09-24
这时，CSS（层叠样式表）提供了一种方法，可以将超出容器宽度的文本用省略号“...”来代替。这个功能主要通过组合使用几个CSS属性来实现，包括`width`、`overflow`、`text-overflow`以及`white-space`。接下来，我们...
CSS省略号text-overflow超出溢出显示省略号
12-04
标题和描述中提到的“CSS省略号text-overflow超出溢出显示省略号”是指在CSS样式中利用`text-overflow: ellipsis;`来实现当文本内容超出指定容器的宽度时，用省略号表示被截断的文本。 `text-overflow`属性有以下几...
css中文本不换行显示省略号和换行后显示省略号
Br不二
03-28 3316
文本不换行，显示省略号 文本换行两行后显示省略号
CSS 文字不换行超出用...省略
xihadddd的博客
09-02 511
例如，我们可以将`word-wrap`设置为`break-word`，表示当文本长度超过50个字符时，自动换行。例如，我们可以将`white-space`设置为`pre-wrap`，如下所示： ```css white-space: pre-wrap;例如，我们可以将`text-align`设置为`center`，如下所示： ```css text-align: center;通过设置`white-space`为`pre-wrap`，我们可以将文本设置为预格式化的格式，即允许文本中的空格。
CSS控制文本超出指定宽度后用省略号代替，CSS控制文本不换行
热门推荐
疯狂源自梦想 技术成就辉煌
03-30 4万+
CSS控制文本超出指定宽度后用省略号代替，CSS控制文本不换行。 一般的文字截断（适用于内联与块）： .text-overflow {     display:block;/*内联对象需加*/     width:31em;     word-break:keep-all;/* 不换行 */     white-space:nowrap;/* 不换行 */     overflo
开发中的文本换行问题
basycai的博客
01-08 1157
文本换行的一些样式属性： 1. word-break:break-all;只对英文起作用，以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用，以单词作为换行依据 3. white-space:pre-wrap; 只对中文起作用，强制换行 4. white-space:nowrap; 强制不换行，都起作用 5. white-space:nowrap; ov
CSS换行 不换行 显示省略号
crazybai0001的博客
09-04 632
【代码】CSS换行 不换行 显示省略号。
css 一行文字不换行超出省略号
hello world
03-20 444
white-space: nowrap; text-overflow: ellipsis; overflow: hidden; white-space 规定段落中的文本不进行换行 text-overflow: ellipsis; 省略号 overflow: hidden; 超出一行部分省略
CSS 强制不换行，文字溢出显示省略号~
泪的结晶的博客
10-06 1999
1. 强制不换行 white-space: nowrap; 文本强制不换行； text-overflow:ellipsis; 文本溢出显示省略号； overflow:hidden; 溢出的部分隐藏； 2. 自动换行 word-wrap: break-word; word-break: normal; 3.强制英文单词断行 word-b...
CSS强制不换行、超出显示省略号
Bloxed_shangyc的博客
07-04 1334
强制不换行 p { white-space:nowrap; } 自动换行 p { word-wrap:break-word; } 强制英文单词断行 p { word-break:break-all; } *注意：设置强制将英文单词断行，需要将行内元素设置为块级元素。 超出显示省略号 p{text-overflow:ellipsis;overflow:hidden;} white-spa...
css自动换行，多出的用省略号代替剩余文本
01-06
### CSS 实现文本自动换行并在超出容器时用省略号替代剩余部分 为了实现这一功能，可以利用 `white-space`、`overflow` 和 `text-overflow` 属性组合来达到预期效果。具体来说： 对于需要处理的文字内容所在的选择器应用以下样式声明[^1]: ```css .text-container { white-space: nowrap; /* 防止文字正常换行 */ overflow: hidden; /* 当内容溢出元素框时不显示超出的部分 */ text-overflow: ellipsis; /* 使用省略号表示被修剪的文本 */ } ``` 如果希望允许多行文本并且每行结尾都可能出现省略号，则可采用 WebKit 浏览器特有的方式通过 `-webkit-line-clamp` 来限定最大可见行数，并配合其他属性完成布局[^2]。 ```css .multi-line-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* 设置最多显示三行 */ overflow: hidden; text-overflow: ellipsis; } ``` 下面给出一段完整的 HTML 页面代码作为例子展示如何将上述 CSS 应用于实际场景中: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 单行文本截断 */ .single-line { width: 200px; border: 1px solid #ccc; padding: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 多行文本截断 (仅适用于WebKit浏览器)*/ .multi-lines { width: 200px; height: 6em; /* 控制高度以适应指定行数 */ border: 1px solid #ccc; padding: 5px; margin-top: 10px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; } </style> </head> <body> <div class="single-line">这是单行文本，在超过设定宽度后应该会出现省略号...</div> <div class="multi-lines">这是一段较长的多行文本示例。当这段话超过了我们预先定义的高度限制时，它将会在最后一行处显示出省略号代替多余的内容。</div> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值