文字超出宽度后，显示省略号的解决办法，以及flex与超出显示省略号冲突问题

最新推荐文章于 2024-06-11 14:02:52 发布
置顶 最新推荐文章于 2024-06-11 14:02:52 发布
阅读量4.7k 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16390749/article/details/54864328
版权


文字超出宽度后，显示省略号的解决办法

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


需要注意的是，在移动端在flex元素中的内容进行省略文字的操作，则flex失效，flex之外的内容宽度不受控制，图片宽度无法撑起，解决办法如下：给设置了flex:1;弹性宽度的div设置最小宽度为0可以解决此问题。

flex:1; min-width:0;

暮雪sun
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
zeppelin使用中的问题汇总
简单就好
03-03 5237
1、使用zeppelin 0.6.2的spark interpreter报错报错：java.lang.NoClassDefFoundError: Could not initialize class org.apache.spark.rdd.RDDOperationScope$ Interpreter output:com.fasterxml.jackson.databind.JsonMapping
flex多层布局导致子元素overflow: hidden，text-overflow: ellipsis属性失效
LiuXiaodong2020的博客
01-30 877
overflow: hidden，text-overflow: ellipsis在flex多级失效
flex:1超出出滚动条
最新发布
weixin_33913005的博客
06-11 305
【代码】flex:1超出出滚动条。
css文字宽度，超出部分显示省略号（...）
lyf976229437的博客
03-23 1467
单行文本超出 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 多行文本超出 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
JS 计算任意字符串宽度
热门推荐
11-09 2万+
注意是宽度不是长度！ 由于像素和字体大小，字节（特别是UTF-8）等限制因素，使得想要知道一个字符串所占的实际宽度并不是那么容易。 下面提供一种比较方便实用的方法： 用个visibility:hidden的浮动的层来计算字符串宽度。 在添加的div容器里把样式设置为和你实际的div一样。 <!DOCTYPE html> <html> <hea...
flex布局文字溢出显示省略号失效的解决方法
qq_32339737的博客
05-05 5541
css单行文字溢出省略： overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100px; css多行文字溢出省略： word-break: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-...
文字超出显示区域后隐藏并显示省略号
03-29
本示例中最多显示3行，超出3行后，在第三行末尾用省略号代替显示。 view { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; -...
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
10-20
本篇文章主要介绍了js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示，具有一定的参考价值，有兴趣的同学可以了解一下。
让超出DIV宽度范围的文字自动显示省略号...
10-30
为了解决这个问题，可以使用CSS中的`text-overflow`属性来实现当文本超出容器宽度时自动显示省略号（`...`），从而达到良好的视觉效果。 #### CSS 属性详解 ##### text-overflow: ellipsis; `text-overflow`属性...
微信小程序实现多行文字超出部分省略号显示功能
10-16
`的组合使得当内容超出设定的行数时，超出的部分会被隐藏，并在最后一行末尾显示省略号。 然后，在微信小程序的WXML文件中，我们将这个样式应用到文本元素上： ```html <text class='productNameText'>{{item....
CSS文本超出指定宽度后隐藏并显示为省略号的实现方法
09-24
下面小编就为大家带来一篇CSS文本超出指定宽度后隐藏并显示为省略号的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css设置文本超过宽度后显示省略号点点点
陈新科的博客
08-03 1534
这个属性用的贼多，我还老是忘，今天记录一下 单行文本显示省略号 .a{ overflow:hidden; /*超出的部分隐藏起来。*/ white-space:nowrap;/*不让文本换行,在一行显示*/ text-overflow:ellipsis;/*超出显示...*/ } 多行文本超出显示省略号 -webkit-是webkit内核的前缀（Chrome） .a{ overflow: hidden; text-overflow: ellipsis.
flex布局后文本过长显示省略号
可以吃的向日葵
08-26 596
【代码】flex布局后文本过长显示省略号。
当页面内容溢出或超出边界时显示省略号
weixin_33725239的博客
04-22 223
使用CSS实现，当内容过多超出边界时，以省略号（…）的形式进行展现。以下通过代码来进行说明： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;内容超出边界用省略号显示Demo1&lt;/title&gt; &lt;style type="text/css"&
如何使用原生CSS在DIV层中画一条线？
人间草木
11-28 4394
效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta htt...
table:设置边距,td内容过长用省略号代替
weixin_33981932的博客
12-08 332
table:设置边距,td内容过长用省略号代替 1.table:设置边距 合并表格边框border-collapse: collapse，然后用th，td的padding设置内容和边框之间的空隙padding。 2.td内容过长用省略号代替 在table中必须设置style:table-layout: fixed;这条属性就是让table的内部布局固定大小。这个时候就用width属性调节t...
flex:布局下，只针对 flex:1布局下文字超出省略号显示无效解决方案
fakuangjingling的博客
01-05 4062
在flex:1的盒子中，设置overflow: hidden;或 width: 0;默认的flex布局下的 flex:1 标题文字超出后省略号显示无效。
css 文本超出显示省略号不起作用
韩旭的博客
07-16 4850
一、单行文本显示省略号 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 二、多行文本显示省略号 overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; //基于webkit内核，基本够用 当然前提是手机端 然后我们现在了遇到这样一个问题 首
文字超出宽度后显示省略号，及flex与超出显示省略号冲突问题
weixin_45744454的博客
06-22 381
文字超出宽度后显示省略号，及flex与超出显示省略号冲突问题 文字超出宽度后显示省略号就三行css样式我总是忘记拼写，背了好多遍还是忘，现在记录一下吧 overflow: hidden; white-space:nowrap; text-overflow:ellipsis; 在设置了弹性布局的元素里面超出显示省略号这三行代码会失效，下面说一下解决办法吧: 给设置了弹性布局的元素设置最小宽度为0 min-width:0; ...
css文字超出文本前面显示省略号
06-07
要实现文字超出文本前面显示省略号的效果，可以结合使用CSS的direction和text-overflow属性。具体实现方法如下： 1. 设置元素的宽度和overflow属性为hidden，以限制文字的显示范围。 2. 设置direction属性为rtl（right-to-left，从右向左），使得文字从右向左显示。 3. 设置text-overflow属性为ellipsis，表示超出部分用省略号表示。 4. 最后，设置white-space属性为nowrap，使得文字不换行。 示例代码如下： ```css div { width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; } ``` 在上面的代码中，当div元素中的文字超出200px的宽度时，就会从右向左显示，并且超出部分会显示省略号。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值