css实现多行文本省略号padding-bottom没有作用问题,

已于 2024-05-27 19:30:53 修改
阅读量363 收藏 5
点赞数 9
文章标签： 前端 vue css3 css
于 2024-02-25 22:31:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46631078/article/details/136288569
版权

<view class=""
                    style="width: 100%;padding-top: 30rpx;padding-left: 30rpx;padding-right: 30rpx; background-color: #f7f7f7;margin: 30rpx;border-radius: 35rpx;"
                   >
                    <view class="" >
                        <view class=""
                            style="display: -webkit-box;webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;">
                            {{item.content}}
                        </view>
                        <view class=""
                            style="width: 80%;margin:0 auto; background-color: #f6f6f6;height: 1rpx;margin-top: 30rpx;">

                        </view>
                    </view>
                </view>

在下面添加一个布局

周bro
关注
  • 9
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
纯css实现多行文本省略号显示
Edward的web前端修炼之路
06-22 1360
首先传统的单行文本实现省略号显示代码如下： overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 注意点：部分低版本浏览器需要加上固定宽度才支持text-overflow属性。 纯css实现多行文本省略号显示：方法一 text-overflow: -o-ellipsis-lastline; o
移动端开发底部元素margin-bottom失效的处理方式
这是我的博客
05-09 2724
在移动端开发的过程中，经常会有在底部进行一个元素固定定位在，这样我们主体数据有需要设置margin-bottom 去防止主体数据被底部遮挡的情况。 这在android手机中这样设置是完全没有问题的，不过在ios手机上就会出现底部定位遮挡了主体内容。当时还尝试了使用padding-bottom去处理，然效果还是不太理想。 查询方法后，一下两种方式是可行的： 主体最后设置一个空白的div（设置好高...
微信小程序padding失效
小鱼尔呀
01-16 3009
如果设置padding失效，在代码中添加box-sizing:border-box;
CSS中为什么padding不生效
weixin_49006730的博客
12-19 3702
CSS中为什么padding不生效，width不生效，height不生效
火狐浏览器中pandding-bottom无效的问题
Chatopera
01-15 1161
火狐浏览器中pandding-bottom无效的问题问题描述导致原因解决方案 问题描述 最近在项目开发中遇到一个奇怪的问题，当我使用 padding-bottom：100px 在页面底部，高度为100px。在Chrome上显示正常： 但是在火狐浏览器中，却不起作用： 造成的现象就是有一部分内容展示不出来。 导致原因 一番查询之后，是因为火狐和ie浏览器会出现‘吞吃’的情况，当节点的内容超过了自身高度，此时还给节点设置了overflow:auto；的话，overflow属性会将超出的部分剪裁到paddin
css文本超出隐藏显示省略号 以及多行文本省略号失效的问题
bamboozjy的博客
07-27 7092
单行文本： .box{ width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } 多行文本： .box{ width: 300px; overflow: hidden; text-overflow: ellipsis; display: -webk...
多行文本省略号的收起、展开
学敲代码的Stars的博客
09-28 301
超过两行显示 省略号 ＋ 展开点击展开之后，在文字后显示 收起。
css 文字第二行省略号,第二行的css省略号
weixin_32307987的博客
08-04 2829
工作text-overflow: ellipsis;的要求是white-space(pre，nowrap等)的单行版本。这意味着文本永远不会到达第二行。人机工程学。在纯CSS中不可能。当我刚才寻找完全相同的东西时我的来源：http：//www.quirksmode.org/css/textoverflow.html(Quirksmode ftw！)编辑如果好的CSS神将实现http://www.w...
CSS ellipsis 与 padding 结合时的问题详解
12-14
CSS 实现的文本截断 考察如下代码实现文本超出自动截断的样式代码： .truncate-text-4 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-...
详解CSS3中border-image的使用
09-25
这个属性是CSS3入门学习中的基础知识，对于提升网页设计的美观度具有重要作用。 首先，`border-image`必须与`border`属性一起使用。这意味着，当你设置了`border-image`后，传统的`border-style`将被替换。如果`...
css3-rotate实现超炫环形旋转特效特效代码
03-20
css3-rotate实现超炫环形旋转特效是一款采用css3 rotate实现的蓝色环形旋转特效代码。
CSS实现多行多列的布局的实例代码
12-29
box1:实现两列多行布局 <li>111 <li>222 <li>333 CSS: .box1 { width: 500px; background: #EEEEEE; } .box1 ul { clear: both; overflow: hidden; } .box1 ul li { width: 48%; height: 100px; ...
bottom-navbar：使用HTML和CSS构建的响应式底部navbar实现
02-18
底部导航栏 使用HTML和CSS构建的响应式底部导航栏实现。
多行文本溢出显示省略号，加了padding之后出现省略号但第三行文本依然显示 --- 解决方法
l13640698113的博客
11-10 1418
问题：多行文本溢出显示省略号，加了padding之后第二行出现省略号但是第三行文本依然显示 navigator{ position: relative; padding:20rpx 0; border-bottom:1px solid #ccc; font-size: 14px; line-height: 1.5; letter-spacing: 1px; overflow : hidden; text-overflow: ellipsis; display:
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1509
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
webClient + fastJSON2 获取json格式的数据，同时解析至java class 并 下划线转驼峰
最新发布
qq_46662528的博客
06-17 186
决定返回值是什么格式一般情况可以不写，但这里要获取JSON格式的。可以将JSON和java的class属性自动进行匹配。webClient中。fastJSON2中。
Vue3-滑动到最右验证功能
地理信息的专栏
06-13 544
在登陆页面，需要滑块，且滑块向右移动到最右边，完成验证
css中多行文本省略号
09-09
在CSS中，你可以使用`text-overflow`属性来实现多行文本的省略号。但是，`text-overflow`属性只能在单行文本中生效。如果你想要实现多行文本的省略号，你可以结合`display`、`-webkit-line-clamp`和`-webkit-box-orient`等属性来实现。 下面是一个示例代码： ```css /* 设置文本容器的高度和显示方式 */ .container { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } /* 设置文本行数和省略号样式 */ .text { display: -webkit-box; -webkit-line-clamp: 3; /* 控制显示的行数 */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; /* 添加省略号 */ } ``` 在上面的示例中，`.container`是包含文本的容器元素，`.text`是需要显示多行文本的元素。通过设置`-webkit-line-clamp`属性，你可以控制显示的行数。如果你想要显示更多行，只需将该属性的值改为相应的数字即可。 请注意，这种方法只适用于WebKit内核的浏览器（如Chrome、Safari等）。如果你想要兼容其他浏览器，你可能需要使用JavaScript来实现多行文本的省略号效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值