CSS文字控制在二行 超出部分不显示

最新推荐文章于 2024-08-10 12:02:24 发布
最新推荐文章于 2024-08-10 12:02:24 发布
阅读量2.8k 收藏 2
点赞数 1
分类专栏： css 文章标签： CSS CSS3 超出隐藏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yiright/article/details/53230760
版权
本文介绍了如何使用CSS3的-webkit-box、-webkit-line-clamp等属性来实现文字控制在二行内，超出部分以省略号显示。这种方法在火狐浏览器中可能不适用。
摘要由CSDN通过智能技术生成


首先三条属性。

overflow:hidden; //超出的文本隐藏

text-overflow:ellipsis; //溢出用省略号显示

white-space:nowrap; //溢出不换行

这三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？


CSS3解决了这个问题，解决方法如下：

display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient:vertical; //从上到下垂直排列子元素࿰

最低0.47元/天 解锁文章
照彦
关注
专栏目录
Css文本超出3行自动隐藏显示省略号
hsc的博客
08-14 5936
Css文本超出3行自动隐藏显示省略号核心样式less 样式引用方式 核心样式 display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; less 样式 生成show-row-1 ,show-row-2,show-row-3,show-row-4 样式 each(range(4),{ .show-row-@{value}{ display:-webkit-box; -w
标题超出本加。。。.txt
11-16 490
来自Asp.net精英论坛：bbs.1aspx.com  当一行文字超过DIV或者Table的宽度的时候，浏览器中默认是让它换行显示的，如果我们不想让他换行显示那要怎么办呢？看到这个标题很容易就会想到截断文字加“...”的做法。 一般的文字截断(适用于内联与块)： ==============CSS================ .text-overflow{ display:b
CSS：overflow溢出显示隐藏
听海边涛声
08-10 1376
CSS：overflow溢出显示隐藏
CSS样式 , 超过两行不显示并显示省略号
有问题联系我qq：270490096
07-30 1354
首先，要知道css的三条属性。 overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 这三个是css的基础属性，需要记得。 但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？   width: 370px;     overflow: hidd...
CSS超出两行隐藏
E的小小地方
08-29 902
CSS超出3行隐藏
CSS 2行文字时正常显示，超过2行显示更多
bigbigpigsobig的博客
06-24 4121
在做页面时，ui有一个这样的需求，当描述中不超过2行文字时，则正常显示在页面上，超过2行的时候，显示更多 想法是这样的 1、不能根据字数的多少判断行数，因为电脑屏幕大小不一样，故一行文字的字数也不同； 2、也不能用 -webkit-line-clamp: 2；因为这样“更多”无法显示，被隐藏的文字也无法显示 所以，用js搞定是比较好的。下面是实现思路 1、首先，假设2行文字的正常高度是40px。在请求描述内容成功之后，去获取描述内容div的高度，如果高度大于40px，则显示更多按钮，并折叠多余内容； 2、
css 多行超出隐藏
weixin_40790248的博客
09-14 690
webkit-box是一个CSS3的属性，用于实现多行文本显示。-webkit-box-orient属性用于设置文本的方向，vertical表示垂直方向。-webkit-line-clamp属性用于设置需要显示的行数，这里设置为3行。text-overflow属性用于设置文本溢出时的省略号。-webkit-line-clamp属性为需要显示的行数。
div+CSS设置一行内文字超过宽度不换行且不显示截断文字加...
09-25
在CSS中，控制文本不换行并且超出部分不显示可以通过设置`word-break`、`white-space`、`overflow`和`text-overflow`属性来完成。这些属性可以搭配使用来达到我们想要的效果。具体知识点如下： 1. `display`属性：...
css3_设置文字在一行内显示，超出部分显示省略号
QiuRenBB的博客
12-09 6529
前言 日常我们在做项目的过程中都会遇到需要给一行文字很多的情况下，设置…样式。正常情况下使用一下代码就能实现： white-space:nowrap; //段落中的文本不进行换行 overflow:hidden; //超出宽度部分隐藏 text-overflow:ellipsis; //当文本溢出时，要发生的事。有三个值： clip - 修剪文本；ellipsis - 显示省略号来代表被修剪的文本；string - 使用给定的字符串来代表被修剪的文本 width: xxx; //宽度自己设定，一
css把超出的部分显示为省略号的方法兼容火狐
09-06
在CSS中，将超出文本部分显示为省略号是一种常见的文本截断技术，它可以帮助保持布局的整洁，尤其是在有限的空间内展示长文本时。要实现这个功能并确保在Firefox浏览器中兼容，我们可以采用以下方法： 首先，我们...
div 超出隐藏 文字超出div部分隐藏css代码
09-22
在这个例子中，我们将显示的文本限制为三行，超出部分会被隐藏。 总之，通过CSS的`overflow`, `text-overflow`, 和 `white-space`属性，我们可以有效地控制div内的文字超出时的显示方式，提高网页设计的美观性和...
CSS方法 p标签内容文本超出3行后隐藏显示 ...
书山有路勤为径，学海无涯苦作舟
02-06 1708
【代码】CSS方法 p标签内容文本超出3行后隐藏显示 ...
css超出多行隐藏记录
颜良文丑的博客
01-06 517
根据需求进行单行隐藏还是多行隐藏打点
CSS笔试题-不超过三行显示全部内容，超过三行隐藏剩余内容并显示省略号
Tizzyhong的博客
05-23 1302
<style> ol { overflow: hidden; /* 向用户发出未显示的溢出内容的信号： */ text-overflow: ellipsis; display: -webkit-box; /* 可以把块容器中的内容限制为指定的行数. 它只有在 display 属性设置成 -webkit-box 或 者 -webkit..
CSS实现文本显示两行，超出显示省略号...
lovearforever的博客
08-19 3079
<div class="option-text"> <span v-text ="item.itemValue" class='ellipsis'></span> </div> <style> .ellipsis { word-break: break-all; text-overfl...
css字体超出部分隐藏
weixin_41981080的博客
09-14 3318
overflow: hidden; text-overflow: ellipsis;//超出部分用...代替 display: -webkit-box; -webkit-line-clamp: 3;//在第几行显示... -webkit-box-orient: vertical; height: 62px; font-size: 14px; font-family: "Microsoft YaH...
css 文本超出2行就隐藏并且显示省略号
热门推荐
apurelotus的博客
05-26 16万+
今天做东西，遇到了这个问题，百度后总结得到了这个结果。 首先，要知道css的三条属性。 overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 这三个是css的基础属性，需要记得。 但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？
css - 文本两行显示，超出省略号表示
weixin_43996865的博客
08-14 728
重点：text-overflow: ellipsis;只对display：inline；起作用 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。 一行显示 white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-brea...
css设置文字统一一行超出在换行
最新发布
09-14
CSS中可以使用`white-space`属性来控制文本如何处理换行。如果你想让一段文字在同一行显示，直到达到容器宽度并且溢出的部分自动换到下一行，你可以设置`white-space: nowrap;`。这会使得文本不会自动换行，而是保持在一行内显示，字符之间紧密相连。 例如： ```css .text-container { width: 300px; white-space: nowrap; } ``` 在这个例子中，`.text-container`内的文本内容将始终保持在一个固定的宽度内，如果内容太长会超出容器宽度，就会从左到右换到下一行。 如果你想要允许单词间换行，但是整体内容保持在同一行直到达到宽度限制，可以使用`overflow: hidden;`结合`text-overflow: ellipsis;`： ```css .text-container { width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ``` 这样，当内容超过宽度时，超出部分会被隐藏，并显示省略号（...）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值