当前位置：首页 > 科技 > 软件

尝试借助CSS @container实现多行文本展开收起

来源：责编：时间：2023-12-18 09:46:36 154观看

导读之前写过这样一篇文章：CSS 实现多行文本“展开收起”，介绍了一些纯 CSS 实现多行文本展开收起的小技巧，非常巧妙，有兴趣的可以回顾一下。不过展开收起按钮的隐藏和显示采用了“障眼法”，也就是通过一个伪元素设置和背景相

之前写过这样一篇文章：CSS 实现多行文本“展开收起”，介绍了一些纯 CSS 实现多行文本展开收起的小技巧，非常巧妙，有兴趣的可以回顾一下。

不过展开收起按钮的隐藏和显示采用了“障眼法”，也就是通过一个伪元素设置和背景相同的颜色覆盖实现的，如下：

：时代在进步，CSS也在不断发展。 CSS 容器查询[1]出来也有一段时间了，能够动态判断容器尺寸，赶紧拿来用一下，发现并没有想象中的那么顺利，甚至还有些难用，一起看看吧

一、简单介绍一下容器查询

CSS 容器查询，顾名思义，就是可以动态查询到容器的尺寸，然后设置不同的样式。

比如有这样一个容器。

<div class="card">  <h2>欢迎关注前端侦探</h2></div>

简单美化一下。

.card{  display: grid;  place-content: center;  width: 350px;  height: 200px;  background-color: #FFE8A3;  border-radius: 8px;  border: 1px dashed #9747FF;}

效果如下：

现在这个容器宽度是 350px，现在希望在宽度小于 250px时文字颜色变为绿色，要怎么做呢？

非常简单，只需要规定一下容器的类型，然后写一个查询语句就行了，关键实现如下：

.card{  /**/  container-type: size;}@container (width < 250px){  .card h2{    color: #14AE5C;  }}

这样在动态改变元素尺寸时就会自动改变颜色了，效果如下

是不是非常简单？

可事实是这样吗，其实还有很多局限。

二、容器查询的局限

主要是有两点局限。

第一点，容器查询不可更改容器本身样式，比如像这样，直接改颜色是不生效的。

.card{  /**/  container-type: size;}@container (width < 250px){  .card{    color: #14AE5C;  }}

白白浪费了一层标签。

也无法通过:has去匹配父级。

.card{  /**/  container-type: size;}@container (width < 250px){  body:has(.card h2){    color: #14AE5C;  }}

还有一点问题更大，容器必须手动指明尺寸，不可以由内容撑开，也就是自适应内容尺寸，比如我们将上面的宽高去除

可以看到，在设置成容器查询类型后，「容器的宽高都变成了 0」，必须手动设置宽高。

所以，在实际应用中，必须要想办法规避这两个问题。

三、多行文本展开收起中的应用

现在回头看多行文本的例子，通过之前的文章，我们可以很“轻松”的实现这样一个布局，如果不太清楚的可以回顾一下，这里就不多描述了

<div class="text-wrap">  <div class="text-content">    <label class="expand"><input type="checkbox" hidden></label>    欢迎关注前端侦探，这里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧。  </div></div>

相关样式如下：

.text-wrap{  display: flex;  position: relative;  width: 300px;  padding: 8px;  outline: 1px dashed #9747FF;  border-radius: 4px;  line-height: 1.5;  text-align: justify;  font-family: cursive;}.expand{  font-size: 80%;  padding: .2em .5em;  background-color: #9747FF;  color: #fff;  border-radius: 4px;  cursor: pointer;}.expand::after{  content: '展开';}.text-content{  display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 3;  overflow: hidden;}.text-content::before{  content: '';  float: right;  height: calc(100% - 24px);}.expand{  float: right;  clear: both;  position: relative;}.text-wrap:has(:checked) .text-content{  -webkit-line-clamp: 999;}.text-wrap:has(:checked) .expand::after{  content: '收起';}

这样就得到了一个“右下角”可以展开收起的布局，不过目前按钮是始终可见的。

我们尝试用容器查询来判断一下：

.text-wrap{  /**/  container-type: size;}

结果...高度都变成了 0。

所以直接添加是不行的。

有什么办法可以让容器查询可以自适应内容高度呢？我这里想到的办法是，外层用一个自适应内容高度的容器，然后容器查询盒子用绝对定位的方式，高度跟随外层，原理如下：

因此，我们需要添加两层，一层作为自适应内容的容器，一层作为容器查询盒子，自适应内容的文本可以用伪元素来代替，和真实内容保持一致就行了。

<div class="text-wrap">    <div class="text" title="欢迎关注前端侦探，这里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧。">      <div class="text-size">        <div class="text-flex">          <div class="text-content">            <label for="check" class="expand"><input type="checkbox" id="check" hidden></label>            欢迎关注前端侦探，这里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧。          </div>        </div>      </div>    </div>  </div>

然后把.text-size座位容器查询盒子。

.text-size{  position: absolute;  inset: 0;  container-type: size;}@container (height <= 4.5em) {  .text-size .expand{    display: none;  }}

虽然现在有点乱，但容器查询已经生效了，在小于等于4.5em（3行）的时候，右下角按钮已经消失了。

如果隐藏占位伪元素，其实是这样的。

空出一大段空白确实不雅，由于我们需要查询的高度是最大高度，所以外层自适应高度不能再变了，相当于 JS 中的 scrollHeight，因此，这层容器需要设置绝对定位，从而不影响最外层容器。

.text{  position: absolute}

同时将占位伪元素隐藏后，效果如下：

现在高度都回到了0，因此我们需要额外一份文本来自适应最外层容器，而且也能展开收起。

<div class="text-wrap">  <div class="text" title="欢迎关注前端侦探，这里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧。">    <div class="text-size">      <div class="text-flex">        <div class="text-content">          <label class="expand"><input type="checkbox" hidden></label>          欢迎关注前端侦探，这里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧。        </div>      </div>    </div>  </div>  <div class="text-content text-place">    欢迎关注前端侦探，这里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧。  </div></div>

我们只需要它的高度，所以可以设置为不可见。

.text-place{  visibility: hidden;}

这样容器的高度其实是由text-place这一层撑开的，效果如下：

总算实现了动态查询自适应文本容器高度，效果如下：

还有很多细节，可以查看以下 demo。

CSS @container clamp (juejin.cn)[2]
CSS @container clamp (codepen.io)[3]

四、总结：容器查询还是不太适合

总的来说，容器查询并没有想象中那么“好用”，甚至有些难用，也有可能使用过场景并不在这里，虽然最终勉强实现了，但是代价太大了，多了两份相同的文本内容，HTML结构也复杂了好多。下面总结一下

容器查询可以根据容器的尺寸匹配不同的样式。
容器查询并没有那么“好用”，有两个局限性。
一个是容器查询不可更改容器本身样式，导致白白浪费一层标签。
还有一个是容器必须手动指明尺寸，不可以由内容撑开，也就是自适应内容尺寸，否则容器尺寸就是 0。
为了规避容器查询的局限性，使用一层额外的文本充当容器查询。
使用另一层额外的文本来撑开最外层容器。

仅仅作为尝试，实际并不推荐，最终结构还是过于复杂，3份相同的内容有些过于冗余，其实HTML结构实现到右下角按钮那里就可以了，动态高度还是交给 JS去判断吧。

[1]容器查询： https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Container_Queries。

[2]CSS @container clamp (juejin.cn)： https://code.juejin.cn/pen/7312418754502066214。

[3]CSS @container clamp (codepen.io)： https://codepen.io/xboxyan/pen/oNmRbvR。

本文链接：http://www.28at.com/showinfo-26-48343-0.html尝试借助CSS @container实现多行文本展开收起

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇：为什么不建议交付静态链接的可执行文件给用户？

下一篇：使用 Sidecar CRD 优化 Istio 性能

标签：

热门焦点

6月安卓手机性能榜：vivo/iQOO霸占旗舰排行榜前三

2023年上半年已经正式过去了，我们也迎来了安兔兔V10版本，在新的骁龙8Gen3和天玑9300发布之前，性能榜的榜单大体会以骁龙8Gen2和天玑9200+为主，至于那颗3.36GHz的骁龙8Gen2领先
使用LLM插件从命令行访问Llama 2

最近的一个大新闻是Meta AI推出了新的开源授权的大型语言模型Llama 2。这是一项非常重要的进展：Llama 2可免费用于研究和商业用途。(几小时前，swyy发现它已从LLaMA 2更名为Lla
JVM优化：实战OutOfMemoryError异常

一、Java堆溢出堆内存中主要存放对象、数组等，只要不断地创建这些对象，并且保证 GC Roots 到对象之间有可达路径来避免垃圾收集回收机制清除这些对象，当这些对象所占空间超过
签约井川里予、何丹彤，单视频点赞近千万，MCN黑马永恒文希快速崛起！

来源：视听观察永恒文希传媒作为一家MCN公司，说起它的名字来，可能大家会觉得有点儿陌生，但是说出来下面一串的名字之后，或许大家就会感到震惊，原来这么多网红，都签约这家公司了。根
认真聊聊东方甄选：如何告别低垂的果实

来源：山核桃作者：财经无忌爆火一年后，俞敏洪和他的东方甄选依旧是颇受外界关心的“网红”。7月5日至9日，为期5天的东方甄选“甘肃行”首次在自有App内直播，
信通院：小米、华为等11家应用商店基本完成APP签名及验签工作

中国信通院表示，目前，小米、华为、OPPO、vivo、360手机助手、百度手机助手、应用宝、豌豆荚和努比亚等9家应用商店，以及抖音和快手2家新型应用分发平
三星Galaxy Z Fold/Flip 5国行售价曝光：最低7499元/12999元起

据官方此前宣布，三星将于7月26日也就是明天在韩国首尔举办Unpacked活动，届时将带来带来包括Galaxy Buds 3、Galaxy Watch 6、Galaxy Tab S9、Galaxy
SN570 NVMe SSD固态硬盘价格与性能兼具

SN570 NVMe SSD固态硬盘是西部数据发布的最新一代WD Blue系列的固态硬盘，不仅闪存技术更为精进，性能也得到了进一步的跃升。WD Blue SN570 NVMe SSD的包装外
Meta盲目扩张致超万人被裁，重金押注元宇宙而前景未明

图片来源：图虫创意日前，Meta创始人兼CEO 马克·扎克伯发布公开信，宣布Meta计划裁员超11000人，占其员工总数13%。他公开承认了自己的预判失误：“不仅