扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > html >如何使用纯CSS定制文本省略
  • 923

0
分享到

如何使用纯CSS定制文本省略

2024-04-02 19:04:59 923人浏览 独家记忆
摘要

小编给大家分享一下如何使用纯CSS定制文本省略，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！WeTest导读拿到设计MM的设计稿

小编给大家分享一下如何使用纯CSS定制文本省略，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

WeTest导读

拿到设计MM的设计稿，Oh NO，点点点后面又双叒叕加内容了，弹丸之地，劳心费神啊！！可怜我们UI开发GG每次苦口婆心说，微臣不是不做，是办不到啊！很是愧疚。而现在，自从用了定制多行省略，腰不酸了，手也不疼了，接起需求来，毫不费劲！
 

一、什么是多行省略？

如何使用纯CSS定制文本省略

 当字数多到一定程度就显示省略号点点点。最初只是简单的点点点，之后花样越来越多，点点点加下箭头，点点点加更多，点点点加更多加箭头...。多行省略就是大段文字后面的花式点点点。

同行这么做：

如何使用纯CSS定制文本省略 

1.Google Plus用透明到白色的渐变遮罩，渐变遮罩在文字超出的时候才显示，但无法挤出文字，且背景只能纯色，不理想。
 

2.豌豆荚则更简单粗暴换行显示，换行显示则文字未超出时依然显示 ...xxx，更不理想！

我们这样做：

如何使用纯CSS定制文本省略

 在QQ浏览器的页面用了一个原创的mod-more UI组件，实现了定制的多行省略，还是纯CSS的，领先同行一大截，赞！赞！赞！只可惜，mod-more组件的高度是固定的。对mod-more进一步进化，完美自适应高度，而且代码简化易用。

二、怎么做到的？

如何使用纯CSS定制文本省略

定制多行省略 = 按需显示...更多 + 文字溢出截断，按需显示...更多是用浮动特性实现，文字溢出阶段可以用前置浮动和line-clamp实现，QQ浏览器现有方案就是前置浮动，但缺点是高度固定，使用line-clamp则自适应高度，完美！限于篇幅，这里只提line-clamp的实现方案，QQ浏览器将在下阶段升级至该方案。

原理详解！

按需显示...更多

如何使用纯CSS定制文本省略

<!doctype html>
<html>
<body>
<style>
@-WEBkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}
</style>
<div style="font-size:12px;line-height: 18px;-webkit-animation: width-change 8s ease infinite;background: rgb(230, 230, 230);">
<div style="float:right;margin-left: -50px;width:100%;position:relative;background: hsla(229, 100%, 75%, 0.5);">
腾讯成立于1998年11月，是目前中国领先的互联网增值服务提供商之一。成立10多年来，腾讯一直秉承“一切以用户价值为依归”的经营理念，为亿级海量用户提供稳定优质的各类服务，始终处于稳健发展状态。2004年6月16日，腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。
</div>
<div style="float:right;position:relative;width:50px;height: 108px;color:transparent;background: hsla(334, 100%, 75%, 0.5);">placeholder</div>
<div style="float:right;width:50px;height:18px;position: relative;background: hsla(27, 100%, 75%, 0.5);">...更多</div>
</div>
</body>
</html>

利用右浮动原理&mdash;&mdash;右浮动元素从右到左依次排列，不够空间则换行。蓝色块、粉色块、橙色块依次右浮动，蓝色块高度小于6行文字时，橙色块在右边，蓝色块高度大于6行文字时，左下角刚好够橙色块排列的空间，于是橙色块就到左边了

 如何使用纯CSS定制文本省略

<!doctype html>
<html>
<body>
<style>
@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}
</style>
<div style="font-size:12px;line-height: 18px;-webkit-animation: width-change 8s ease infinite;background: rgb(230, 230, 230);">
<div style="float:right;margin-left: -50px;width:100%;position:relative;background: hsla(229, 100%, 75%, 0.5);">
腾讯成立于1998年11月，是目前中国领先的互联网增值服务提供商之一。成立10多年来，腾讯一直秉承“一切以用户价值为依归”的经营理念，为亿级海量用户提供稳定优质的各类服务，始终处于稳健发展状态。2004年6月16日，腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。
</div>
<div style="float:right;position:relative;width:50px;height: 108px;color:transparent;background: hsla(334, 100%, 75%, 0.5);">placeholder</div>
<div style="float:right;width:50px;height:18px;position: relative;background: hsla(27, 100%, 75%, 0.5);left: 100%;-webkit-transfORM: translate(-100%,-100%);">...更多</div>
</div>
</body>
</html>

进一步将橙色块偏移到正确位置就大功告成了！细心的同学会发现，将橙色块加上渐变底就是Google Plus在用的方案。

 文字溢出截断

如何使用纯CSS定制文本省略

<!DOCTYPE html>
<html>
<body>
<style>
@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}
</style>
<div style="font-size: 12px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 6;color: red;line-height: 18px;position: relative;-webkit-animation: width-change 8s ease infinite;background: rgb(230, 230, 230);">
<div style="color:#000;display: inline;vertical-align: top;background: rgb(204, 204, 204);">
腾讯成立于1998年11月，是目前中国领先的互联网增值服务提供商之一。成立10多年来，腾讯一直秉承“一切以用户价值为依归”的经营理念，为亿级海量用户提供稳定优质的各类服务，始终处于稳健发展状态。2004年6月16日，腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。</div>
</div>
</body>
</html>

 -webkit-line-clamp是webkit内核的私有css属性，用于进行多行省略，在安卓和iOS上全支持。但它固定使用省略号，无法直接扩展。而且自带了溢出截断逻辑，作用于容器高度。仔细考察可发现它使用的省略号是单字符&hellip;，可以用文字css属性如font-size,letter-spacing,color等控制。

 如何使用纯CSS定制文本省略

<!DOCTYPE html><html><body>
<style>@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}</style>
<div style="font-size: 36px;letter-spacing: 28px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 6;color: red;line-height: 18px;position: relative;-webkit-animation: width-change 8s ease infinite;background: rgb(230, 230, 230);">
<div style="color:#000;display: inline;font-size: 12px;vertical-align: top;letter-spacing: 0;background: rgb(204, 204, 204);">
腾讯成立于1998年11月，是目前中国领先的互联网增值服务提供商之一。成立10多年来，腾讯一直秉承“一切以用户价值为依归”的经营理念，为亿级海量用户提供稳定优质的各类服务，始终处于稳健发展状态。2004年6月16日，腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。
</div>
</div>
</body>
</html>

 设置外容器的font-size、letter-spacing、color，并在子容器里恢复就可以单独设置省略号。这里外容器设置font-size的值等于2倍行高（余下要撑开的宽度可用letter-spacing补足，也可仅用font-size撑开全部的宽度），color为transparent就可以让line-clamp既挤出文字又不截断容器高度，外容器高度达到7行而不是默认表现的6行，从而达到需要的溢出截断效果

合体！定制多行省略

如何使用纯CSS定制文本省略

<!DOCTYPE html><html><body>
<style>@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}</style>
<div style="position: relative;line-height:18px;-webkit-animation: width-change 8s ease infinite;max-height: 108px;">
    <div style="font-size: 36px;letter-spacing: 28px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 6;color: transparent;line-height: 18px;position: relative;">
        <div style="font-size:12px;color: #000;display: inline;vertical-align: top;letter-spacing: 0;">
        腾讯成立于1998年11月，是目前中国领先的互联网增值服务提供商之一。成立10多年来，腾讯一直秉承“一切以用户价值为依归”的经营理念，为亿级海量用户提供稳定优质的各类服务，始终处于稳健发展状态。2004年6月16日，腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。
        </div>
        <div style="position:absolute;top: 0;left: 50%;width: 100%;height: 100%;letter-spacing: 0;color: #000;font-size: 12px;background: rgba(173, 216, 230, 0.5);">
            <div style="float: right;width: 50%;height: 100%;background: rgba(255, 192, 203, 0.5);"></div>
            <div style="float: right;width: 50%;height: 108px;background: hsla(223, 100%, 50%, 0.19);"></div>
            <div style="float: right;width: 50px;height: 18px;position: relative;background: rgba(255, 165, 0, 0.5);" class="">... 更多</div>
        </div>
    </div>
</div>   
</body></html>

将-webkit-line-clamp实现的文字溢出截断代码为主体，叠加绝对定位同步的按需显示...更多结构。因为绝对定位，这里使用百分比简化代码。最外包一层结构限制最大高度。

 如何使用纯CSS定制文本省略

<!DOCTYPE html><html><body>
<style>


@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}
.ellipsis {
    position: relative;
    background: rgb(230, 230, 230);
    width: 260px;
    max-height: 108px; 
    line-height: 18px; 
    overflow: hidden;
    -webkit-animation: width-change 8s ease infinite;
}
.ellipsis-container {
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6; 
    font-size: 50px; 
    color: transparent;
}
.ellipsis-content {
    color: #000;
    display: inline;
    vertical-align: top;
    font-size: 12px; 
}
.ellipsis-ghost {
    position:absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    color: #000;
}
.ellipsis-ghost:before {
    content: "";
    display: block;
    float: right;
    width: 50%;
    height: 100%;
}
.ellipsis-placeholder {
    content: "";
    display: block;
    float: right;
    width: 50%;
    height: 108px; 
}
.ellipsis-more {
    position: relative;
    float: right;
    font-size: 12px; 
    width: 50px; 
    height: 18px; 
    margin-top: -18px; 
}
</style>
<div class="ellipsis">
    <div class="ellipsis-container">
        <div class="ellipsis-content">
 腾讯成立于1998年11月，是目前中国领先的互联网增值服务提供商之一。成立10多年来，腾讯一直秉承“一切以用户价值为依归”的经营理念，为亿级海量用户提供稳定优质的各类服务，始终处于稳健发展状态。2004年6月16日，腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。</div>
        <div class="ellipsis-ghost">
            <div class="ellipsis-placeholder"></div>
            <div class="ellipsis-more">...更多</div>
        </div>
    </div>
</div>   
</body></html>

将橙色块偏移到正确位置，梳理了下代码，最终实现了自适应高度的定制多行省略，完美！从此妈妈再也不担心我在省略号后面加东西改东西了！恭喜你击败99%的同行了！

 三、为什么这么做？

line-clamp有3宗罪

如何使用纯CSS定制文本省略

和 text-align:justify 一起用会使省略号和文字相叠

 如何使用纯CSS定制文本省略

 超出截断后会截掉部分行高

 如何使用纯CSS定制文本省略

 省略号出现在单词中间 

定制省略当然某问题啦

如何使用纯CSS定制文本省略

ext-align:justify时如期所示，没问题！

如何使用纯CSS定制文本省略 

截断时如期所示，也没问题！

如何使用纯CSS定制文本省略 

省略号在有单词时如期显示，依然没问题！

更别说点点点花样增改

如何使用纯CSS定制文本省略

如何使用纯CSS定制文本省略

简单增改文字加链接只是小case

如何使用纯CSS定制文本省略 

用折角还是其他图片表示文本溢出可以增添趣味

如何使用纯CSS定制文本省略 

溢出时显示溢出字数增加了实用用途

以上是“如何使用纯CSS定制文本省略”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网html频道！

--结束END--

本文标题: 如何使用纯CSS定制文本省略

本文链接: https://lsjlt.com/news/73913.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 如何使用纯CSS定制文本省略
    小编给大家分享一下如何使用纯CSS定制文本省略，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！WeTest导读拿到设计MM的设计稿...
    99+
    2024-04-02
  • 纯CSS实现“文本溢出截断省略”的几种方法
    小编给大家分享一下纯CSS实现“文本溢出截断省略”的几种方法，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！在我们的日常开发工作中，文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ，但在实现上却有不...
    99+
    2023-06-08
  • CSS如何控制文本的长度超过一行显示省略号
    这篇文章主要为大家展示了“CSS如何控制文本的长度超过一行显示省略号”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“CSS如何控制文本的长度超过一行显示省略号”这...
    99+
    2024-04-02
  • 如何在CSS中禁用文本换行和添加省略号
    这篇文章主要介绍了如何在CSS中禁用文本换行和添加省略号，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。如果您的文本空间紧张，您可能需要将其剪短以适应其他元素。当然，您可以手动...
    99+
    2023-06-04
  • 如何使用css实现文字过长显示省略号
    这篇文章主要为大家展示了如何使用css实现文字过长显示省略号，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带大家一起来研究并学习一下“如何使用css实现文字过长显示省略号”这篇文章吧。　　&...
    99+
    2024-04-02
  • CSS如何实现文本溢出显示省略号效果
    本文小编为大家详细介绍“CSS如何实现文本溢出显示省略号效果”，内容详细，步骤清晰，细节处理妥当，希望这篇“CSS如何实现文本溢出显示省略号效果”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。text-overfl...
    99+
    2023-07-04
  • 如何使用CSS实现文本超出div或者span时用省略号代替
    小编给大家分享一下如何使用CSS实现文本超出div或者span时用省略号代替 ，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！在项目中我们经常需要在文本过长时显示，将文本超出的部分内容用省略...
    99+
    2024-04-02
  • CSS怎么控制文本超出指定宽度显示省略号和文本不换行效果
    这篇文章将为大家详细讲解有关CSS怎么控制文本超出指定宽度显示省略号和文本不换行效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。一般的文字截断（适用于内联与块）：CSS...
    99+
    2024-04-02
  • css如何实现单行文字省略号
    这篇文章主要介绍了css如何实现单行文字省略号，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。单行实现文字省略号  &nb...
    99+
    2024-04-02
  • css如何设置文字超出省略号
    小编给大家分享一下css如何设置文字超出省略号，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！css是什么意思css是一种用来表现HTML或XML等文件样式的计算机...
    99+
    2023-06-14
  • 怎么用css实现文本溢出显示省略号
    这篇文章给大家分享的是有关怎么用css实现文本溢出显示省略号的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。代码如下:<!DOCTYPE html><html l...
    99+
    2024-04-02
  • 怎么用css控制文本实现越界省略号以及自动换行
    这篇文章主要讲解了“怎么用css控制文本实现越界省略号以及自动换行”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用css控制文本实现越界省略号以及自动换...
    99+
    2024-04-02
  • 怎么用CSS实现多行文本的省略号显示
    这篇文章主要介绍怎么用CSS实现多行文本的省略号显示，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！ 合理的截断多行文本是件不容易的事情，我们通常采用几种方法解决：overf...
    99+
    2024-04-02
  • 如何使用纯CSS绘制可爱玉兔
    这篇文章给大家分享的是有关如何使用纯CSS绘制可爱玉兔的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。玉兔效果图：实现代码：html标签<div class=&qu...
    99+
    2024-04-02
  • 如何使用纯CSS绘制一个爱心
    小编给大家分享一下如何使用纯CSS绘制一个爱心，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！css的全称是什么css的全称是Cascading Style She...
    99+
    2023-06-14
  • CSS强制文本在一行内显示并且有多余字符则使用省略号表示
    这篇文章主要讲解了“CSS强制文本在一行内显示并且有多余字符则使用省略号表示”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS强制文本在一行内显示并且有多...
    99+
    2024-04-02
  • 如何使用纯CSS实现多行文本的渐隐动画
    这篇文章主要介绍“如何使用纯CSS实现多行文本的渐隐动画”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“如何使用纯CSS实现多行文本的渐隐动画”文章能帮助大家解决问题...
    99+
    2024-04-02
  • 如何使用text-overflow:ellipsis实现溢出文本省略号显示无需js
    本篇内容主要讲解“如何使用text-overflow:ellipsis实现溢出文本省略号显示无需js”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何使用tex...
    99+
    2024-04-02
  • 怎样解决CSS超出文本指定宽度用省略号代替和文本不换行的问题
    本篇文章为大家展示了怎样解决CSS超出文本指定宽度用省略号代替和文本不换行的问题，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。一般的文字截断（适用于内联与块）：CS...
    99+
    2024-04-02
  • CSS怎么将超出的文本隐藏并用省略号代替
    今天小编给大家分享一下CSS怎么将超出的文本隐藏并用省略号代替的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作