文本css省略号

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

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

相关阅读

相关文本css省略号

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 CSS文本溢出时添加省略号

.box{ /overflow: hidden; text-overflow:ellipsis;white-space:nowrap;三者要一起用/

朱雀/ 2022年08月08日 00:47/ 0 赞/ 216 阅读

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

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

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

相关 css文本处理，字符串超长展示省略号

众所周知，通过css设置文字强制不换行超出用省略号表示很简单： { white-space: nowrap; 文本强制不换行； tex

港控/mmm°/ 2022年04月10日 06:39/ 0 赞/ 309 阅读

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

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

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

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

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

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