文本css省略号

- 日理万妓 2024-04-17 05:35 171阅读 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 条评论，171人围观）

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

相关阅读

相关文本css省略号

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

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

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

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

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

相关 css实现文本省略号

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

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

相关 css文本省略号

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

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

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

[CSS文本溢出显示省略号][CSS] 项目中常常有这种需要我们对溢出文本进行"…"显示的操作，单行多行的情况都有（具体几行得看设计师心情了），这篇随笔是我个人对这种情况

墨蓝/ 2023年02月13日 11:35/ 0 赞/ 39 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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