溢出隐藏一行或多行文字变成...

最新推荐文章于 2024-10-13 19:30:05 发布

luobinzi

最新推荐文章于 2024-10-13 19:30:05 发布

阅读量141

点赞数

分类专栏：笔记文章标签： css css3 html5

本文链接：https://blog.csdn.net/m0_63250938/article/details/127436294

版权

笔记专栏收录该内容

16 篇文章 2 订阅

订阅专栏

这篇博客探讨了如何使用CSS来管理内容溢出的情况，包括如何设置`overflow`属性为`hidden`以隐藏超出的内容，利用`-webkit-line-clamp`限制显示的行数，以及结合`text-overflow`和`display`属性创建优雅的省略号效果。这对于网页布局和用户体验至关重要。

摘要由CSDN通过智能技术生成

div{
  overflow: hidden;
  -webkit-line-clamp: 1;  //超过几行变...
  text-overflow: ellipsis;  
  display: -webkit-box;
  -webkit-box-orient:vertical;
}

场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

luobinzi

关注关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

前端单行或多行文本显示，溢出文本显示省略号，兼容IE多行溢出隐藏

xkqbaiyuan的博客

10-19

2261

文本单行显示,溢出的显示省略号对于一个单行文本标签，超出隐藏,只需要将标签设置一个定width，再加上 overflow: hidden; 属性即可。如果想超出的部分以省略号显示，再加上 text-overflow:ellipsis;white-space: nowrap; 属性。 { overflow: hidden; text-overflow:ellipsis; ...

多行文本溢出隐藏省略号

darui_lili的博客

10-29

1974

多行文本溢出隐藏省略号一、单行文本溢出二、多行文本溢出一、单行文本溢出 /* 单行文本溢出 */ .inlines{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 二、多行文本溢出 /* 多行文本溢出 */ .intwolines{ display: -webkit-box !important; ove

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

实现单行和多行文本溢出隐藏变为省略号

qq_44771388的博客

04-19

279

最近做项目用到了这个知识点，所以纪录一下实现单行文本溢出方法也就三行代码 overflow: hidden; white-space: nowrap; text-overflow:ellipsis; overflow: hidden 溢出隐藏 white-space属性是用来设置如何处理元素中的空白，设置了nowrap之后文本不会换行。我之前写过一篇关于标签 pre和css的white-space属性的博客。标签 pre和css的white-space属性 text-overflow 用来控制

css超出文本溢出隐藏，多行溢出隐藏变三个点

qq_42148925的博客

02-05

596

#单行溢出隐藏 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; #多行溢出隐藏 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; 多行溢出隐藏的关键点是如果css不行点话其实关键点是放在wxml里面点style里面 ...

css 多行溢出... 单行居中

刻痕

05-07

841

css 多行溢出… 单行居中样式处理很多项目遇到多行溢出变成… ，处理样式为：几行溢出就修改 -webkit-line-clamp 为几 .css{ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } 若项目需要单行居中，多行溢出省略号这样处理：标签： <div classN

多行文字溢出隐藏显示省略号

ct5211314的博客

03-25

325

/通过使用 word-break 属性，可以让浏览器实现在任意位置的换行。//这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。//从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）display:-webkit-box;//将对象作为弹性伸缩盒子模型显示。//用来定义元素内的空白该如何处理。//溢出用省略号显示。

css多行文字溢出隐藏,单行文字隐藏

一直在路上的博客

10-20

391

对于单行文本很简单 white-space: nowrap; text-overflow: ellipsis; overflow: hidden; 将这三行代码加到css中就ok了，white-space: nowrap; 是强制显示为一行，text-overflow: ellipsis; 将文本溢出显示为（…）,overflow: hidden; 不用多说，溢出隐藏。而想要多行文本溢出隐藏就需要使用web-kit based 的浏览器提供的支持了代码如下 overflow: hidden; text-

css实现单行/多行文本溢出隐藏

hhhhhha_的博客

11-29

411

【代码】css实现单行/多行文本溢出隐藏。

css实现强制不换行溢出显示点点点（...）多行溢出显示(...)

厚渡

01-28

1万+

介绍 1.自动换行： word-wrap:break-word; word-break:normal; 2.强制换行： word-break:break-all; 按字符截断换行 /* 支持IE和chrome，FF不支持*/ word-wrap:break-word; 按英文单词整体截断换行 /* 以上三个浏览器均支持 */ * 注意：单词换行需要父盒子为块级元素 3.强制不换行： white-space:nowrap; 属性规定当文本溢出包含元素时发生的事情。 text-overflow: c

css 单行、两行或多行显示不下省略号...表示实现

lryh_的博客

01-19

2900

限制行数显示不下省略号显示

vue控制多行文字展开收起的实现示例

01-19

这里讲一下，如何使用vue控制多行文字展开收起（也叫控制文字展开隐藏）。效果：这里设置了控制三行，如果超过三行会展示，“显示更多” 超出文字显示省略号。点击“显示更多”会展开所有文案，按钮变成“收起” ...

CSS-通过css来实现单行或者多行文本移除显示省略号('...')

wust_cyl的博客

05-17

3626

单行文本：我们看一下如下效果这种情况随处可见，实现起来也很简单。 <p> 友情，能够随时说话找一个能随时随地和你聊天的人真的很难。 </p>p{ width:10em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }多行文本...

2024前端面试题！（附答案及解析）（2024.10月最新版）

最新发布

qq_41893686的博客

10-13

302

【代码】使用scss生成旋转圆圈。

前端_002_CSS扫盲

qq_42936379的博客

10-10

1212

text-align 水平对齐和vertical-align 垂直对齐。选择器{ 属性名:属性值;class选择器 .[class_name]属性选择器 [arrtribute_name]也可以在标签里通过style属性进行样式设置。id选择器 #[id_name]四种链接状态分别是：，拿a标签举例。height和width。元素选择器 [tag]2.文件后缀.css。

2024年CSS @规则(At-rules)新增数量超过过去十年的总和，CSS @规则(At-rules)详解系列目录

逆境清醒的博客

10-11

1299

2024年CSS @规则(At-rules)新增数量超过过去十年的总和，CSS @规则(At-rules)详解系列目录

CSS响应式布局

2401_82561004的博客

10-10

863

CSS 响应式布局也称自适应布局，是 Ethan Marcotte 在 2010 年 5月份提出的一个概念，简单来讲就是一个网站能够兼容多个不同的终端（设备），而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。响应式布局能够为使用不同终端的用户提供很好的用户体验，而且随着大屏智能手机的普及，用“大势所趋”来形容也不为过。接下来我们以媒体查询为例来具体演示一下响应式布局的实现。

css控制文字超出内容显示...（-webkit-line-clamp 多行文字溢出...兼容火狐ie浏览器）...

06-06

如果你想控制文字超出内容时的显示方式，可以使用CSS的text-overflow属性。text-overflow属性可以取以下三个值之一： 1. clip：超出内容的部分将会被剪切掉，不会显示。 2. ellipsis：超出内容的部分将会被省略号代替。 3. string：超出内容的部分将会被指定的字符串代替。例如，你可以使用以下代码将超出内容部分的文字显示为“...”： ``` .overflow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ``` 如果你想要多行文字溢出时的显示方式，可以使用-webkit-line-clamp属性。但是，这个属性只在WebKit浏览器中生效，如果你需要兼容Firefox和IE，可以使用一些JavaScript库来实现，比如clamp.js。以下是一个使用了clamp.js的例子： ``` <div class="clamp"> <p>多行文本溢出测试，这是第一行。</p> <p>这是第二行。</p> <p>这是第三行。</p> <p>这是第四行。</p> <p>这是第五行。</p> </div> .clamp { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; /* 显示的行数 */ } /* 兼容 Firefox 和 IE */ .clamp p:last-child { margin-bottom: 0; } ``` 这段代码会将文本框的高度限制在三行之内，并且超出部分会用省略号代替。同时，我们使用了-webkit-box-orient属性来设置文本的方向为垂直，-webkit-line-clamp属性来控制显示的行数。最后，我们使用了clamp.js库来兼容Firefox和IE浏览器。