无涯教程网

Html 如果文本大于允许值，则在溢出时使用 css 淡出文本

发布于04月02日

我正在try 创建一个文本淡出效果，当文本量大于行可以处理的范围时.我用max-height、overflow和linear-gradient的混合物来实现这一点.像这样的.

max-height:200px;
overflow:hidden;
text-overflow: ellipsis;
background: -webkit-linear-gradient(#000, #fff);

full fiddle is available人.我试图达到与此类似的效果在此处输入图像描述

我也差不多了.问题是，在我的例子中，文本从一开始就开始淡出，我希望只有当它真正接近最大大小时才开始淡出.假设已经是150px的话就开始淡出.另外，我只使用了-webkit个前缀，我假设我可以为其他渲染引擎添加其他前缀.

有没有办法在纯CSS中做到这一点？

推荐答案

看起来您的要求只是淡出从某个高度(约150px)开始的文本，在该高度呈现的文本(如果有)被视为溢出.所以你可以try 在文本区域的顶部使用transparent线性渐变层，我们可以通过使用伪元素:before这样的简洁方式来实现:

.row:before {
  content:'';
  width:100%;
  height:100%;    
  position:absolute;
  left:0;
  top:0;
  background:linear-gradient(transparent 150px, white);
}

Html相关问答推荐

Bootstrap右和左颈部

传单自定义标记(divIcon)html/css不适用

我的表的第一列似乎是推其他2列到右边，我不能改变它

Chrome中是否有一个本地显示密码功能，用于`input type = password/`？""<"">

Font Awesome 6插入符号未显示

Chrome和Safari浏览器中的CSS3动画不同

如何在Vim中删除Html标签？

如何使用html和css将两个项目垂直对齐

将2个Flex列合并为1个交替子列

如何在网格中拥有离散的行

不呈现孙子元素，使用R htmlTools：：Taglist为分页的pdf生成HTML

如何将多个类名组合到CSS中的一个关键帧

调整 Rmarkdown 输出的 html_document 的标题和副标题之间的间距

带标签 css 的 div 内的中心图标

如何检测输入字段是否没有必填且没有占位符？

白色栏超出页面100%的右侧

当悬停时，同时影响相邻的两侧div

鼠标悬停时切换 colored颜色的双色链接

在中心而不是边界处填充 svg 的背景

Bootstrap 5 网格问题，div 向下转义

实用课程推荐

相关教程推荐