文本css省略号

- 日理万妓 2024-04-17 05:35 74阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style> .main { width: 200px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } p{ position: relative; line-height: 20px; max-height: 40px; overflow: hidden; } p::after{ content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px; background: -webkit-linear-gradient(left, transparent, #fff 55%); background: -o-linear-gradient(right, transparent, #fff 55%); background: -moz-linear-gradient(right, transparent, #fff 55%); background: linear-gradient(to right, transparent, #fff 55%); } </style>
    </head>
    <body>
        <div class="main">
            更好地放不干净就擐甲挥戈见到过和来得及法规和空间联合考虑接电话的框架和来得及复合弓两节课的返回 东方精工颠覆了空间规划链接的积分换
        </div>
        <p>
            更好地放不干净就擐甲挥戈见到过和来得及法规和空间联合考虑接电话的框架和来得及复合弓两节课的返回 东方精工颠覆了空间规划链接的积分换
        </p>
    </body>
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关文本css省略号

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

- 日理万妓/ 2024年04月17日 05:35/ 0 赞/ 75 阅读

相关【css】超过文本显示省略号

显示省略号的前提：必须有指定宽度一、单行文本超出部分显示省略号 <table> <tbody> <tr> <th style="width:143p

末蓝、/ 2024年03月23日 18:02/ 0 赞/ 51 阅读

相关 css实现文本省略号

> csdn 给了我们一个平台，让我们可以记录自己在工作学习中遇到的问题，哪怕是很小很小的问题，有时也值得你去记录… css实现文本过长，显示省略号 <styl

r囧r小猫/ 2023年07月22日 02:44/ 0 赞/ 10 阅读

相关 css文本省略号

这里记录下如何用CSS实现单行、多行文本溢出容器的时候用省略号代替溢出部分。单行文本溢出容器时显示省略号的CSS实现方法 / 规定当内容溢出元素框（容器）时隐藏

我会带着你远行/ 2023年06月04日 04:51/ 0 赞/ 7 阅读

相关 CSS文本溢出显示省略号

单行（方法一） overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 单行（方法

Myth丶恋晨/ 2023年01月04日 10:28/ 0 赞/ 274 阅读

相关 css文本溢出显示省略号

文本溢出处理 `单行`文本 overflow:hidden; text-overflow:ellipsis; white-space:now

r囧r小猫/ 2022年12月24日 11:58/ 0 赞/ 272 阅读

相关 CSS设置文本溢出显示省略号

单行文本 ![在这里插入图片描述][20210708103956946.png] overflow: hidden; text-overflow: el

小鱼儿/ 2022年10月18日 12:59/ 0 赞/ 244 阅读

相关 CSS文本溢出显示省略号

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

缺乏、安全感/ 2022年04月23日 04:08/ 0 赞/ 321 阅读

相关 css 文本超出部分省略号

1. 单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 2.

梦里梦外;/ 2021年09月17日 04:34/ 0 赞/ 454 阅读

相关 CSS文本溢出显示省略号

单行语法 overflow:hidden; text-overflow:ellipsis; white-space:nowrap 示例

红太狼/ 2021年01月27日 16:34/ 0 赞/ 819 阅读