css多行实现打点

末蓝、 2023-02-15 10:22 19阅读 0赞

针对现代浏览器、移动端、小程序实现多行打点：

<style>
    .box{
        width: 200px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    </style>
    <div class="box">
    旗下拥有：专业的中文IT技术社区： CSDN.NET；移动端开发者专属APP： CSDN APP、CSDN学院APP；新媒体矩
    阵微信公众号：CSDN资讯、程序人生、GitChat、CSDN学院、AI科技大本营、区块链大本营、CSDN云计算、
    GitChat精品课、人工智能头条、CSDN企业招聘；IT技术培训学习平台： CSDN学院；技术知识移动社区： 
    GitChat；IT人力资源服务：科锐福克斯；高校IT技术学习成长平台：高校俱乐部
    </div>

**实现效果：**

![20200605092913905.png][]

**小程序：**

<view class="box">
        【大众点评与美团网合并 王兴张涛担任联席CEO】大众点评网与美团网今天联合发布声明，宣布达成战略合作，双方已共同成立一家新公司。新公司将实施Co-CEO制度，美团CEO王兴和大众点评CEO张涛将同时担任联席CEO和联席董事长，重大决策将在联席CEO和董事会层面完成。
    </view>
    <style>
    .box{
    	width: 200px; 
    	display: -webkit-box;
    	-webkit-line-clamp: 3;
    	-webkit-box-orient: vertical;
    	overflow: hidden;
    }
    
    </style>

![2020060509402983.png][]

[20200605092913905.png]: https://img-blog.csdnimg.cn/20200605092913905.png
[2020060509402983.png]: https://img-blog.csdnimg.cn/2020060509402983.png

发表评论取消回复

表情：

评论列表（有 0 条评论，19人围观）

还没有评论，来说两句吧...

相关阅读

相关如何用CSS实现多行省略

前言这是个老掉牙的需求啦，不过仍然有很多人在网上找解决方案，特别是搜索结果排名靠前的那些，都是些只会介绍兼容性不好的使用 -webkit-line-clamp的方案。如

怼烎@/ 2024年03月26日 17:03/ 0 赞/ 156 阅读

相关 css超出部分省略（单行、多行，多种方法实现）

HTML <p class="text">这是一行测试数据,这是一行测试数据,这是二行测试数据,这是一行测试数据,这是三行测试数据,这是四行测试数据</p>

谁践踏了优雅/ 2023年10月09日 14:31/ 0 赞/ 78 阅读

相关 css多行实现打点

针对现代浏览器、移动端、小程序实现多行打点： <style> .box{ width: 200px; display: -we

末蓝、/ 2023年02月15日 10:22/ 0 赞/ 20 阅读

相关 CSS_css文字超出显示省略号，单行，多行

单行： white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 多行：

朱雀/ 2022年12月29日 00:25/ 0 赞/ 108 阅读

相关 css单行和多行超过宽度显示点点点

单行超出显示点点点 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多

向右看齐/ 2022年12月28日 04:04/ 0 赞/ 231 阅读

相关 CSS 快速实现烟花绽放（仅100多行代码）

关注公众号前端热榜，回复“简历” 领取程序员简历模板最近项目上需要做一个烟花动画，要求是随机大小，不同地方出现，先看效果 ![8c6f2c93cb609814bcd2

超、凢脫俗/ 2022年08月28日 11:44/ 0 赞/ 404 阅读

相关 CSS 文本打点

text-overflow ：ellipsis; //让截断的文字显示为点点。还有一个值是clip意思是截断不显示点点 white-space : nowrap; //让

╰+哭是因爲堅強的太久メ/ 2022年05月26日 00:55/ 0 赞/ 416 阅读

相关纯 CSS 实现多行文字截断

做响应式系统设计的时候遇到需要对标题进行多行文字截取的效果，如下图： ![1541751362955876.jpg][] 看似十分简单的标题截断效果，但是竟然没有一个统一

我不是女神ヾ/ 2022年01月29日 07:25/ 0 赞/ 292 阅读

相关 css多行文字溢出隐藏为三个点(...)

对于单行文本很简单 white-space: nowrap; text-overflow: ellipsis; overflow: hidden;

今天药忘吃喽~/ 2022年01月22日 06:45/ 0 赞/ 542 阅读

相关 css:文本多行超出隐藏

一定要给定宽度，其中`line-clamp`为有几行，最好再加上行高与高度 width:40px; display: -webkit-box; -we

ゞ浴缸里的玫瑰/ 2021年12月21日 15:45/ 0 赞/ 560 阅读