【笔记】css设置文本超出部分显示为省略号

最新推荐文章于 2024-05-05 13:03:06 发布

_月半_

最新推荐文章于 2024-05-05 13:03:06 发布

阅读量171

点赞数

文章标签： html css3 css html5 vue.js

本文链接：https://blog.youkuaiyun.com/qq_46100150/article/details/107057362

版权

本文介绍了一种使用CSS样式来优雅地处理文本溢出的方法，通过设置宽度限制、隐藏溢出内容、防止自动换行并用省略号代替溢出部分，确保了页面布局的整洁和美观。

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

//html

<div>测试显示区域文字超出</div>
<p>超出部分隐藏超出部分隐藏超出部分隐藏超出部分隐藏超出部分隐藏</p>

//css

p{
	width: 200px;
	overflow: hidden;  /*溢出隐藏*/
	white-space: nowrap;/*不换行*/
	text-overflow:ellipsis;/*超出部分文字以...显示*/
	border: 1px solid forestgreen;
}

//实现效果

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

_月半_

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【CSS笔记】CSS布局相关属性（显示元素、文本溢出、元素浮动）

✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过优快云记录学习心得和笔记内容。

08-18

435

当子级元素使用浮动属性之后，它的父级元素如果没有设置高度，那么由于浮动元素脱离文档流，不占据文档流的高度，所以从而导致父级元素的高度不能被撑开。CSS可以通过【display】属性来设置HTML元素是否显示，以及显示的方式，是以行内元素显示，还是以块内元素显示，还是以行内块元素显示。也可以设置为none隐藏元素，display设置隐藏元素之后，元素不会占据原先的空间，后面的元素会填充隐藏元素的空间位置。，也就是这个元素不占据原先的空间，后面的元素会填充浮动元素原先的空间。要如何解决父级元素的高度问题呢？..

css实现超出部分显示省略号

weixin_41897680的博客

09-10

548

css实现省略号

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

css设置内容超出后显示省略号

酷酷的旭

11-29

8497

在写前端页面时，通常会遇到文字超出后显示省略号；页面本来是这个样子的，第一行的文字超出已经压倒了下面的文字，第一步，使用overflow: hidden把超出的内容进行隐藏，页面变成了这样第二步使用white-space: nowrap设置内容不换行，变成了这样第三步，使用text-overflow: ellipsis设置超出内容为省略号，功能实现~ ...

CSS设置文本超出隐藏显示省略号

qq_33721778的博客

12-29

897

CSS设置文本超出隐藏显示省略号单行文本多行文本在线试一试单行文本 HTML代码如下： <p class="ellipsis1" title="单行文本，超出隐藏，并且显示省略号。试一试我隐藏啦！！！！" > 单行文本，超出隐藏，并且显示省略号。试一试我隐藏啦！！！！ </p> CSS代码如下： .ellipsis1 { width: 300px; white-space: nowrap; overflow: hi

CSS 文字超出变为省略号

m0_55333789的博客

12-06

2118

CSS 文字超出变为省略号

CSS实现文本显示两行，超出部分显示省略号（常用到）

mengmeng1_的博客

02-03

2223

<div class="option-text"> <span v-text ="item.itemValue" class='ellipsis'></span> </div> <style> .ellipsis { word-break: break-all; text-overfl...

热门推荐

明天也要努力的博客

12-05

15万+

css设置超出显示省略号可分两种情况：但使用的核心代码是一样的：需要先使用 “overflow:hidden;” 来把超出的部分隐藏，然后使用“text-overflow:ellipsis;”当文本超出时显示为省略号。思路： 1、使用 overflow:hidden; 语句不显示超过对象尺寸的内容，就是把超出的部分隐藏了； 2、使用 -webkit-line-clamp: 行数; 语句限制显示文本的行数； 3、使用 text-overflow:ellipsis; 语句用省略号“…”隐藏超出范围的文本说明

css实现超出固定长度的部分以省略号显示

小瑾沐晚风的博客

12-29

4246

1.一行中超出固定长度的部分以省略号显示 #div1{ width: 100px; overflow: hidden; /*内容会被修剪，并且其余内容是不可见的*/ text-overflow:ellipsis; /*显示省略符号来代表被修剪的文本。*/ white-space: nowrap; /*文本不换行*/ } 2.多行中...

css设置超出宽度文本显示...

qq_43639075的博客

05-15

1万+

width:200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

单行文字超过某个宽度时，显示省略号

weixin_30646505的博客

07-13

831

设置css属性就可以解决这个问题： white-space:nowrap; //段落中的文本不进行换行 overflow:hidden; //超出宽度部分隐藏 text-overflow:ellipsis; //当文本溢出时，要发生的事。有三个值： clip - 修剪文本；ellipsis -显示省略号来代表被修剪的文本；string -使用给定的字符串来代表被修剪的文本 w...

CSS 超出部分显示省略号

热爱思考、活力满满、开朗爱笑的年轻人

11-11

4万+

直接看代码：&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;title&gt;desktop de

Css溢出隐藏

weixin_34090562的博客

08-10

2075

display: -webkit-box;-webkit-line-clamp: 2; /*多少行数之后显示为省略...*/word-wrap: break-word;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical; displa...

CSS设置文字超出则显示.....

a1057962851的博客

11-16

3万+

.one{ width: 300px; overflow: hidden;/*超出部分隐藏*/ white-space: nowrap;/*不换行*/ text-overflow:ellipsis;/*超出部分文字以...显示*/ } .one li（li是标签）{ ...

CSS超出部分显示省略号

Mayisheart的博客

01-22

6231

height: 76rpx; width: 300rpx; display: -webkit-box; /*设置为弹性盒子*/ -webkit-line-clamp: 2; /*最多显示3行*/ overflow: hidden; /*超出隐藏*/ text-overflow: ellipsis; /*超出显示为省略号*/ -webkit-box-orient: vertical; word-break: break-all; /*强制英文单词自动换行*/ ...

实现网页文字溢出显示省略号的jQuery插件

在没有使用jQuery插件的情况下，处理文本溢出通常会涉及CSS样式，比如使用CSS的`text-overflow`属性来设置溢出文本显示省略号。然而，当页面元素和布局变得更加复杂时，单靠CSS可能不足以解决所有问题。这时，jQuery...