首页 > 其他分享 >浅析CSS实现超过3行折叠并显示...查看详情

浅析CSS实现超过3行折叠并显示...查看详情

时间:2023-06-15 18:33:49浏览次数:40  
标签:浮动 ... text height webkit 环绕 文本 浅析 CSS

  要实现效果如下:尾部带查看详情,前面有三个点省略号。之前单独看这个布局,即使借助 JavaScript 也不是一件容易的事啊(需要计算文字宽度动态截取文本,然后 append 上三个点和查看详情。vue-clamp 就是这么做的,包括很多博客也是这么讲的,但是讲真,如果是个列表,这种不断的判断,肯定不是妙解),更别说下面的交互和判断逻辑了,不过经过我的一番琢磨,其实纯 CSS 也能完美实现的,下面就一步一步来看看如何实现吧~

1、多行文本截断显示省略号,这种不多说了,就是这样的方法

@mixin mul-text-e($lines) {
  @include multiple-text-ellipsis($lines);
}
@mixin multiple-text-ellipsis($lines) {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
}

2、右下角环绕效果

  因为【查看详情】前面还有三个点,所以我们想到的是“文本环绕效果”。提到 文本环绕效果,一般能想到 浮动 float,千万不要以为浮动已经是过去式了,具体的场景还是很有用的。比如下面放一个按钮,然后设置右浮动,文字环绕浮动元素【查看详情】周围,并不会影响原文字。

  这时已经有了 环绕 的效果了,只是位于右上角,如何将按钮移到右下角呢?先尝试一下 margin

.tip {
  float: right;
  color: rgba(255, 98, 139, 1);
  margin-top: 80rpx;
}

  可以看到,虽然按钮到了右下角,但是文本却没有环绕按钮上方的空间,空出了一大截,那怎么办呢?虽然 margin 不能解决问题,但是整个文本还是受到了浮动按钮的影响,如果有多个浮动元素会怎么样呢?这里用伪元素来 ::before 代替

    .desc {
      @include mul-text-e(3);
      &::before {
        content: ' ';
        float: right;
        width: 10rpx;
        height: 80rpx;
        background: red;
      }
    }

  现在按钮到了伪元素的左侧,如何移到下面呢?很简单,清除一下浮动 clear: both; 就可以了

    .tip {
      float: right;
      color: rgba(255, 98, 139, 1);
      clear: both;
    }

  可以看到,现在文本是完全环绕在右侧的两个浮动元素了,只要把红色背景的伪元素宽度设置为0,就实现了右下角环绕的效果

3、动态高度

  上面虽然完成了右下加环绕,但是高度是固定的,如何动态设置呢?这里有2种方式:(1)可以用到 calc 计算,用整个容器高度减去按钮的高度即可;(2)可以高度设置 100%,然后采用负的 margin 来实现

    .desc {
      @include mul-text-e(3);
      &::before {
        content: ' ';
        float: right;
        // height: 100%;
        // margin-bottom: -40rpx;
        height: calc(100% - 40rpx);
      }
    }

4、其他浏览器的兼容处理

  设置display: -webkit-box该属性后,原本的文本好像变成了一整块,浮动元素也无法产生环绕效果,去掉之后浮动就正常了。那么问题来了:没有 display: -webkit-box 怎么实现多行截断呢 ?

  其实上面的努力已经实现了右下角环绕的效果,如果在知道行数的情况下设置一个最大高度,是不是也完成了多行截断呢?为了便于设置高度,可以添加一个行高 line-height,如果需要设置成 3 行,那高度就设置成line-height * 3

.text {
  /*
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  */
  line-height: 1.5;
  max-height: 4.5em;
  overflow: hidden;
}

  当然这样会没有省略号,现在加上省略号吧,可以用伪元素实现

.btn::before{
  content: '...';
  position: absolute;
  left: -10px;
  color: #333;
  transform: translateX(-100%)
}

  这样,Safari 和 Firefox 的兼容布局基本上就完成了

更多详细内容可参考文章:《CSS 实现多行文本“展开收起” - https://juejin.cn/post/6963904955262435336》

《css这样实现多行文本“展开收起” 超酷的好吧 - https://zhuanlan.zhihu.com/p/468314222》

标签:浮动,...,text,height,webkit,环绕,文本,浅析,CSS
From: https://www.cnblogs.com/goloving/p/17483725.html

相关文章

  • 浅析视频监控技术及AI发展趋势下的智能化视频技术应用
    视频监控技术是指通过摄像机对指定区域进行实时视频直播、录制、传输、存储、管理和分析的技术系统。它可以用于监控各种场所,如校园、工厂、工地、工作场所、公共区域、交通工具等。视频监控技术主要涉及到以下几个部分:1、摄像机摄像机是视频监控技术的核心设备,它主要用于捕捉画......
  • tailwindcss基本使用
    目录一、tailwindcss基本使用1、设置tailwind和postcss一、tailwindcss基本使用1、设置tailwind和postcss命令*npminit-y*npmitailwindcsspostcss-cliautoprefixer*npxtailwindinit编辑tailwind.config.jsmodule.exports={content:["./public/**/*.......
  • 2023-06-15 css伪类before、after制作文字两边横线
    <divclass="box">测试</div>···.box{color:#ccc;text-align:center;position:relative;&::after{position:absolute;left:24rpx;top:52%;content:'';width:calc(50%......
  • 浅析H5页面跳转小程序的3种实现方案
    经常会有这样的场景:用户在网页中一键唤起小程序,能够给用户提供更好的体验。实现H5跳转小程序的方案目前有多种,可以根据自己的实际场景选择。第一种:通过URLScheme适合在外部浏览器运行的H5页面,通过URLScheme的方式来拉起微信打开指定小程序。那如何获取小程序......
  • 文本溢出显示...
    text-overflow设置文本内容溢出时呈现的模式/*要让text-overflow生效.块属性必须先设置:overflow:hidden;white-space:nowrap;*/overflow:hidden;white-space:nowrap;text-overflow:ellipsis;/*clip裁掉溢出部分,ellipsis溢出部分用'...'代替*/......
  • Oracle drop table ... purge
    https://www.cnblogs.com/hider/p/12194675.html操作Oracle时,经常会删除一个表,当删除错误后,希望能够恢复该表,有时也希望删除表之后能够立刻释放表的空间。通过purge的使用可以在Oracle中删除表、恢复表和空间释放。droptable当在Oracle中删除(drop)一个表时,数据库不......
  • VBA中的选择结构If ...Then ...ElseIf...Else;Select Case...Case Else...
    IfElseIfElse结构的基本语法如下:If条件表达式1Then'表达式1真时,执行的代码ElseIf条件表达式2Then'表达式2真时,执行的代码ElseIf条件表达式3Then'表达式3真时,执行的代码...ElseIf条件表达式nThen'表达式n真时,执行的代码Else'以上表达......
  • CSS(语义化标签、多媒体标签、新表单元素、属性选择器、结构伪类选择器、伪元素选择器
    一、HTML5新特性概述HTML5的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题,基本是IE9+以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性。1语义化标签(★★)以前布局,我们基本用div来做。di......
  • CSS的基本使用
    1.初始css1.1引入方式当读到一个样式表时,浏览器会根据它来格式化HTML文档。有三种:行内样式表(在HTML元素内部)<pstyle="color:white;">学习HTML好简单</p>内部样式表(位于<head>标签内部)<styletype="text/css"></style>外部样式表<linkhref="css/in......
  • vue+css: 引用的组件快速改变滚动条样式
    在a组件页面内有b组件,b组件产生的滚动条太丑不好看但是又不想改变b组件(b组件公共用的地方很多)又不想专门复制份在此基础上改。只要在使用的组件上增加css代码即可同时让组件内滚动条生效,原理是因为此滚动条相当于未定义类的当前组件全局。所以可以直接使用并生效comp.vue<styl......