三行或更多行文本的纯 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 省略号 的相关文章

  • 更改 mat-form-field 中的边框颜色

    我正在使用有角度的材料mat form field 我有深色背景 因此尝试将表单字段的边框更改为白色 但我无法使用 css 来实现它 不 无论我在 css 中进行什么更改 它们都不会反映到mat form field 这是我的代码的链接 S
  • 以 /* 开始初始注释的目的!在 JavaScript 和 CSS 文件中

    我注意到 JavaScript 或 CSS 文件中的初始注释有时以 感叹号的目的是什么 例如 jQuery https en wikipedia org wiki JQuery jQuery v1 7 1 jquery com jquery
  • D3js 从数组而不是文件中获取数据

    我发现了这个优秀的 d3js 图表here http bl ocks org Caged 6476579 但就我而言 我希望此图表从数组而不是 tsv 文件中获取值 我想让它从表 中获取值 我怎样才能做到这一点 因为它使用一个函数来实现这一
  • 如何在 Bootstrap v4 中实现导航栏下拉悬停?

    我对新的 bootstrap 版本有点困惑 因为他们将下拉菜单更改为 div
  • 角度 ui-grid 自定义标题 html

    我正在尝试将 glyphicon glyphicon thlist 我可以单击并调用控制器函数 添加到默认标题的左侧 我采用了默认标头并尝试操纵它来执行此操作 默认标头位于 https raw githubusercontent com a
  • 如何获取 HtmlGenericControl 的属性值?

    我创造HtmlGenericControl像这样 HtmlGenericControl inner li new HtmlGenericControl li inner li Attributes Add style list style
  • 当您点击外部时,Bootstrap 3 Mobile 导航不会崩溃

    当我单击 触摸菜单外部时 我的 Bootstrap 3 移动菜单确实会折叠 我可以想出一个解决问题的方法 document on touchstart click html not nav function navbar collapse
  • 具有列顺序的响应式多列列表

    我正在尝试创建一个有序的多列列表 但正在努力解决 CSS 网格布局规则 期望的结果应该是响应式的 在小屏幕上有 2 个网格列 在较大的屏幕上最多有 4 个网格列 同时保持列顺序 而不是像这样排序 1 2 3 4 5 6 7 8 9 10 1
  • 如何修改 Elasticsearch 文档的 _source 字段

    问题 有没有办法从文档的 source 中清除 html html 的剥离可以是周期性的 触发的 或者理想情况下是在索引时即时进行的 我将数据输入到elasticsearch中 并针对分析器进行索引 该分析器在索引之前剥离不需要的htmls
  • jquery菜单栏浮动顶部

    我试图使菜单栏不断浮动在浏览器的顶部 因此当他们向下滚动页面时 菜单栏仍位于顶部 我该怎么做呢 Regards CSS 标签position fixed 即使滚动 也会使其保持在屏幕上的同一位置 使用它 然后将其定位为top right b
  • HTML DOM 宽度 + 可见窗口高度

    如何获取浏览器打开时可用空间的当前高度和宽度 我不需要整个文档的高度 只需要屏幕上可见的高度 你可以看看这个博客文章 http www howtocreate co uk tutorials javascript browserwindow
  • rvest - 在 1 个标签中抓取 2 个类

    我是新来的 如何提取标签中具有 2 个类名或仅 1 个类名的元素 这是我的代码和问题 doc lt paste span class a1 b1 text1 span span class b1 text2 span library rve
  • 从 Google 电子表格中的列填充 HTML 下拉菜单

    我是 gs 的新手 所以这应该不难 我有一个 Google 电子表格 其中一列中有值 假设 A 列 我使用 gs 创建了一个自定义菜单 用户将在其中选择一个选项 单击其中一个选项 新组件 将出现一个弹出窗口 其中包含一个下拉菜单 用户应从其
  • 基于多个类选择元素

    我有一个样式规则 我想在标签具有two类 有没有办法不用 JavaScript 来执行此操作 换句话说 li class left ui class selector 我想应用我的风格规则only if the li两者都有 left an
  • div 元素中的文本在 Firefox 中位于水平对齐的 span 元素之上

    我正在编写一个 Web 应用程序 其中支持票证显示为左侧的票证 ID 作为静态文本 其余字段 描述 严重性 持续时间 状态 报告者 在右侧显示为固定文本中的滚动文本 大小视口 我从一个 span 包含票证 ID 和视口 div 包含第二个
  • 图像映射区域周围不需要的边框

    我正在使用带有圆形区域的图像贴图 问题是我在 IE7 中的区域周围出现了不需要的边框 此边框不会出现在 FF 和 Chrome 中 也不会出现在 IE8 IE9 中 我尝试向图像添加 border 0 锚点的 css 属性 即 a bord
  • CSS class 和 id 同名

    css class 和 id 同名有什么问题吗 就像文章 帖子页脚的 footer 和页面页脚的 footer 一样 不 完全可以接受 一个类是使用 a 来定义的 并且 ID 是使用定义的 因此 就浏览器而言 它们是两个完全独立的项目 唯一
  • 如何使子元素被访问/活动时父元素的颜色发生变化

    我有一个下拉导航 我想要做的是 当我单击任何子菜单链接时 我希望父按钮的颜色在链接处于活动状态时保持更改 这是代码的小提琴链接 https jsfiddle net v28ydshL https jsfiddle net v28ydshL
  • Bootstrap 居中 div 内的文本左对齐

    我有一段 4 行诗 位于居中的 div 中 因为它是诗歌 所以我需要将 4 行左对齐 但不要对齐到 div 的左侧 这是它的居中方式 Lorem ipsum dolor sit amet onsectetur adipisicin Dolo
  • localhost/test.php 不返回任何内容

    我正在遵循教程构建一个网络应用程序 我创建了一个简单的test php网络空间中的文件 var www html 问题是当我输入localhost test php在浏览器地址窗口中 它返回一个空页面 我试过localhost php in

随机推荐

  • 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