三行或更多行文本的纯 CSS 省略号

2023-11-21

是否有一种仅 CSS 的方法(无 JavaScript/jQuery)仅显示前两行,如果有三行或更多行,则隐藏多余的行并显示省略号?

例如,我怎样才能拿这个小提琴:

http://jsfiddle.net/0yyr3e63/

...并使它看起来像这样?

Lorem Ipsum Dolor
Sit Amet Consectetur

Ut Enim Ad Minim
Veniam Quis Nostrud...

Duis Aute Irure
Dolor In...

提前致谢。


您可以使用text-overflow:ellipsis财产与height.

像这样

.truncate 
{
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height:100px;
}

通过使用 text-overflow,您可以在不使用 javascript 的情况下显示输出。

Sources

来源链接

了解有关截断的更多信息。阅读此链接

新更新

对于多行省略号,您可以使用此方法。

css
.classname:after{
content: "\02026";
} 

多行省略号

我认为可能有用的链接很少

1.Codepen示例

2.CSS技巧

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

三行或更多行文本的纯 CSS 省略号 的相关文章

随机推荐

  • Java从字符串中解析带有时区的日期

    我想从格式的字符串中解析带有时区的日期 31 12 2014 18 09 05 30 我尝试使用 simple Date Format 进行解析 d MM yyyy HH mm ZZ and d MM yyyy HH mm Z 但这给了我一
  • 找不到框架 GoogleToolboxForMac

    通过 pod update 更新 Firebase 后 出现如下错误 ld warning directory not found for option F Users bennysantoso Library Developer Xcod
  • Swift - 获取视频中的所有帧

    我正在关注这段代码获取视频中的所有帧 在此链接中 他试图获取特定时间的帧 但我需要获取所有帧 这是我的代码 var mutableVideoURL NSURL var videoFrames UIImage let asset AVAsse
  • 如何使用 jQuery 触发 select onchange 事件?

    我有一个下拉列表
  • 在 Mac 上找不到 /dev/kvm

    所以我一直在我的 Mac 上使用 android studio 2 0 beta AVD 工作正常 但后来我注意到 android studio 现在无法启动 AVD 它说未找到 dev kvm 在 BIOS 安全设置中启用 VT x 确保
  • iOS如何检测用户是否更改了系统时间,如果没有将设备时间与服务器时间进行比较

    需求是必须检测iPhone的系统时间是否被用户手动更改 为此我用过 NSNotificationCenter defaultCenter addObserver self selector timeChangedNotification n
  • Visual Studio 2017 在应用程序设置中找不到连接字符串

    对于连接数据库和读取数据 我使用从 Web config 文件读取连接字符串的数据集 一切都在 Visual Studio 2013 中运行 但是当我在 Visual Studio 2017 中打开这个项目时 我无法配置 它错误 无法找到连
  • 如何从浏览器获取客户端的位置?

    我需要的是客户端的纬度 经度 通过浏览器 在网上找到了一些文章 在堆栈溢出本身中找到了一些 旧文章 从网络浏览器获取 GPS 位置 大约 18 个月前就有人回答了 想知道是否有其他 更有效 的方式从浏览器获取用户位置信息 到目前为止 找到了
  • C++ 成员函数具有相同的名称和参数,不同的返回类型

    如果我在类中定义具有相同名称和参数但返回类型不同的成员函数 这样是否有效 class Test public int a double b class Foo private Test t public inline Test getTes
  • 如何从代码隐藏访问 web.config 的 httpRuntime 部分?

    实际上我需要maxRequestLength的值httpRuntimeweb config 中的部分来检查发布文件的大小是否更大 最好的阅读方式是什么 先感谢您 你可以尝试类似的东西 HttpRuntimeSection section C
  • 如何在 Meteor 的 mongo 查询中指定读取首选项

    在 Meteor Mongo 中 如何在 Meteor Mongo Query 中将 readPref 指定为 Primary Secondary 希望下面的内容能让大家更好的理解Meteor和Mongo的关系 Meteor系列更舒适 Me
  • 对临时异常的 const 引用

    我们都知道这样的事情在 C 中是有效的 const T x T while T x T is not In 最近的一个问题谈话导致了这条规则 OP 发布了一些明显让人想起 UB 的代码 但我希望它的修改版本能够工作 这是修改版本 inclu
  • 如何将@DataJpaTest与多个数据源一起使用

    我尝试使用注释 DataJpaTest 编写集成测试 我有两个数据源 主要和次要 类配置 结果我有一个错误 expected single matching bean but found 2 primaryDataSource second
  • Windows 中的 CBT 挂钩...“CBT”代表什么?

    这是一个快速的 我开始使用hooks在 Windows 中 我注意到有一种称为 CBT 挂钩的挂钩类型 虽然我从文档中知道它是如何使用的 但 CBT 到底代表什么 我在文档中找到它时遇到了一些困难 CBT 代表 基于计算机的培训 除了启用教
  • CSS 100% 高度主体和元素

    我在使我的一个元素在 100 的整体布局中 100 时遇到问题 我尝试了不同的定位解决方案 最终要么隐藏内容浮动在底部页脚后面 要么内容最终位于页脚后面 并在页脚后面继续 这是我的页面布局
  • 在 Windows 远程服务器中运行命令并获取 C# .NET 中的控制台输出

    我有一个remote server name 视窗 username and password 使用 C Net 我想run a command在远程服务器上并取回console output 有没有办法在 C 中做到这一点 我能够使用运行
  • 从 Base64 编码图像获取尺寸

    我有一个 Angular 应用程序 我需要以下尺寸 Base64 编码的图像 我尝试将其加载到Image 但它只是说它是0x0 const image new Image image src data image jpeg base64 s
  • Zend Lucene 和 Java Lucene 的性能比较

    Zend Lucene和Java Lucene分别是用PHP和java构建的 而PHP语言的水平比java更高 只是想知道这两者在索引构建和数据搜索方面的性能差异有多大 让java创建并重建索引 然后让php使用索引是不是更有效 这是 Ze
  • SQL Server 字符串到 varbinary 的转换

    好的 问题是需要对 2 个表进行合并或联接 一种将文件内容存储为 image 类型或 varbinary max 另一种将文件内容存储为十六进制字符串 如果我将相同的内容上传到两个表中 字符串内容 字节数组到字符串 看起来像这样 appli
  • 三行或更多行文本的纯 CSS 省略号

    是否有一种仅 CSS 的方法 无 JavaScript jQuery 仅显示前两行 如果有三行或更多行 则隐藏多余的行并显示省略号 例如 我怎样才能拿这个小提琴 http jsfiddle net 0yyr3e63 并使它看起来像这样 Lo