css溢出隐藏 (省略号)在部分手机不生效

已于 2023-04-07 09:17:24 修改
阅读量1.9k 收藏
点赞数
分类专栏： css 文章标签： 做一个有知识的流氓
于 2019-09-06 16:20:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43553701/article/details/100581565
版权

看一个css中的黑科技 具有注释的代码是生效的

width: 100%;
font-size: 0.32rem;
color: #333;
margin-bottom: 0.04rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
flex-direction: column;
// 下面这两行比较重要  把这两行加上就可以了  
/*! autoprefixer: off */
-webkit-box-orient: vertical;
мо仙堡杠把子ご灬
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
DIV 上下居中 多行 省略号
06-05
总结来说，实现`<div>`内多行文字垂直居中并添加省略号功能，主要涉及CSS的布局、文本对齐和溢出隐藏技术。通过`display: flex`或`display: grid`实现上下居中，结合`line-clamp`、`-webkit-line-clamp`以及`...
用CSS截断字符串的两种实用方法
09-25
`text-overflow`属性有两个可选值，`clip`和`ellipsis`，前者不显示省略号，而是简单地裁剪超出的内容，后者则在内容溢出时显示省略号。需要注意的是，`text-overflow`在IE中是专有的，但在其他现代浏览器中也有私有...
CSS：移动端设置文字超过某个行数用省略号表示
KongKong_Rac的博客
09-08 701
设置文字超过某个行数用省略号表示 利用弹性伸缩盒子模型 /* 将对象设置为弹性伸缩盒子模型 */ display: -webkit-box; /* 设置对象的子元素的排列方式：从上到下垂直排列子元素 */ -webkit-box-orient: vertical; /* 限制块元素显示的文本行数 */ -webkit-line-clamp: 2; overflow: hidden; /* 多行文本溢出显示省略号 */ text-overflow: ellipsis;
2022-12-23 工作记录--CSS-超出多行显示省略号ios真机偶失效问题
weixin_48850734的博客
12-23 2740
CSS-超出多行显示省略号ios真机偶失效问题
移动端有滚动条但是页面不能滚动的问题
qq_42654348的博客
06-28 2729
移动端有滚动条但是页面不能滚动的问题
css设置固定高度多行超出变省略号，适用于手机端
DreamFJ的博客
10-22 5919
单行省略 overflow:hidden; text-overflow:ellipsis; white-space:nowrap 多行省略 基本设置： display: -webkit-box;/** 对象作为伸缩盒子模型显示 **/ word-break: break-all; text-overflow: ellipsis; -webkit-box...
文本溢出省略号text-overflow: ellipsis显示无效？这一属性到底该怎么用？
杜永康的博客
12-06 3893
因为 text-overflow: ellipsis; 并不会强制“溢出”事件的发生，因此为了能让文本能够溢出容器，就需要给 text-overflow: ellipsis; 配上两个个额外的属性：overflow 和 white-space。以以下代码为例： 效果图：值得一提的是，这个div如果给他设置高度，不管设置多少，从文本省略的显示角度来说，是无效的。因为以上方法，针对的仅仅是单行文本省略。如果要实现多行文本省略，请继续往下看：实现多行文本省略，同样的，我们需要用text-overflow: e
用css截取字符的几种方法详解(css排版隐藏溢出文本).docx
11-27
`使得在文本末尾显示一个省略号，表示还有未显示的文本。这种方法适用于单行文本，如果有多行文本，`text-overflow: ellipsis;`不会生效。 2. **使用`white-space: nowrap`** 如果你希望文本在同一行内显示，直到...
CSS3截取字符串实例代码【推荐】
09-27
当`white-space`设置为`nowrap`时，文本将不允许换行，所有内容都会在一行内显示，直到遇到`overflow:hidden`，超出部分才会被隐藏。 结合上述三个属性，我们可以创建一个CSS3截取字符串的例子： ```html <!...
微信小程序 css使用技巧总结
08-31
例如，使用`ellipsis`显示省略号： ```css .text-overflow { text-overflow: ellipsis; white-space: nowrap; /* 防止文本换行 */ overflow: hidden; /* 隐藏超出的内容 */ } ``` 如果需要在特定条件下（如...
css 文本超出2行才隐藏并且显示省略号
weixin_40979142的博客
07-25 669
overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行      以上只试用于单行文本，要解决多行如下：   css3解决了这个问题，解决方法如下： display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。 -webkit-box-orie...
css文本超出显示省略号
m0_64502236的博客
02-09 514
单行文本超出省略
css文字超出省略号代替不起作用解决方法汇总大全
weixin_45136521的博客
02-22 7104
网上给的说法都是直接加上面的，而在移动端，需要再加上最后一行代码。 原文地址
设置多行文本超出显示省略号，在手机端超出部分无法隐藏解决方法
涂涂
12-02 6548
方法一： 跨浏览器兼容的方案 比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现； p { position:relative; line-height:1.4em; /* 3 times the line-height to show 3 lines */ height:4.2em; overflow:hidden; }
（已解决）text-overflow: ellipsis； 不生效 问题
最新发布
qq_68469751的博客
08-16 2265
text-overflow: ellipsis； 不生效 问题...............
text-overflow显示单行或多行超出部分显示省略号
qq_34319049的博客
01-09 1142
今天柠檬的工作都做完了，就翻了翻以前的笔记，回顾一下，正所谓温故而知新，看到了以前写的一个text-overflow:ellipsis;属性，一个很简单，很常见的属性，结果就这么把我难住了、难住了、住了、了，怎么回事呢？ 先上代码： css样式： .whiteSpace{ width: 200px; height: 105px; white-space: normal; borde...
css-设置单行文本溢出省略号，使用overflow：hidden属性之后的出现的问题几解决办法。
前端开发小白9527
04-25 818
css-设置单行文本溢出省略号，使用overflow：hidden属性之后的出现的问题几解决办法。
text-overflow: ellipsis不生效的几种情况（记录一下）
qq_32166301的博客
06-13 1821
2.容器不可以是flex布局，若要使用flex布局，可以用flex布局的父元素包裹。text-overflow: ellipsis不生效的几种情况。1.没有给容器添加固定宽度。
CSS - 纯css实现多行文本溢出省略（兼容所有浏览器）
时间在飞飞的博客
05-14 1714
这个方式参考了使用了网上流传的方式来解决，是我目前已知的chuncss的最好解决方案。 我把网上的又增加了文字两端对齐和，右侧padding,让‘...’更加紧贴文字，对文字形影不离。 <div class="mutil-line-ellipsis"> <div>CSS - 纯css实现多行文本溢出省略（兼容所有浏览器）CSS - 纯css实现多行文本溢出省略（兼容所有浏览器）CSS - 纯css实现多行文本溢出省略（兼容所有浏览器）</div>
css一行文本溢出隐藏显示省略号
05-19
你可以使用 CSS 的 `text-overflow` 属性来实现文本溢出隐藏，并用省略号表示未显示的文本。 具体来说，你可以使用以下 CSS 样式： ```css .overflow-hidden { white-space: nowrap; overflow: hidden; text-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值