CSS多行省略号跨浏览器

2023-12-08

我的网页中有一个具有固定宽度和高度的“div”。

以下 css 仅适用于单行文本:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

如何使用具有跨浏览器兼容性的纯 css 在该 div 内的文本上的多行文本上应用省略号?


试试这个例子:

display: block; /* Fallback for non-webkit */
display: -webkit-box;
max-width: 400px;
height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
margin: 0 auto;
font-size: $font-size;
line-height: $line-height;
-webkit-line-clamp: $lines-to-show;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

http://codepen.io/martinwolf/pen/qlFdp

或者去 dotdotdot.js

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

CSS多行省略号跨浏览器 的相关文章

  • 将自定义字体与 wkhtmltopdf 一起使用

    我正在尝试在使用 wkhtmltopdf 生成的 PDF 中使用自定义字体 我读到您不能使用 google webfonts 并且 wkhtmltopdf 使用 truetype ttf 文件 谁能证实这一点吗 所以我从 google we
  • 如何在不同页面上使用不同类型的导航栏组件

    我为我们项目的两个不同子系统创建了两个不同的导航栏组件 App js function App return lt gt
  • 多列定义列表[重复]

    这个问题在这里已经有答案了 我有一个 dl 像这样 dl dt Quantity dd dt Size dd dt Rise dd dt Color dd dd dt dd dt dd dt dd dt dl 该列表是通过 php 动态生成
  • 边界半径圆

    我有这个代码 span p margin 0 span background color red display inline block border radius 50 span p 25 p p 08 p span 我想在我的跨度上画
  • ReactTable 修复了最后一行

    我正在使用 ReactTable 最后我需要创建一些摘要 当分页存在时 它每次都应该可见 可以用react table来实现吗 我可以通过创建下一个表来部分解决这个问题 但我没有找到如何隐藏标题的方法 另一个问题是调整列宽度时 它不会应用于
  • @Font-face 不适用于 IOS

    我正在开发一个 WordPress 网站 并且在每个页面上都有一个 H1 标签作为该页面的标题 我正在使用 font face 的特殊字体 它在每个浏览器的 Windows 上都运行良好 但是当我切换到 Mac 时 它不会显示 h1 标签
  • IE8 忽略 td 宽度,适用于 IE7

    有一张表看起来像这样 table width 100 tr td td tr tr td style width 201px td td style width 100 td tr table 在除 IE8 之外的每个浏览器 包括 IE7
  • 如何在表格的 tbody/thead 部分周围创建边框?

    我正在尝试创建一个包含表格数据的页面 该页面必须显示为多个表格 然而 我有两个相互冲突的要求需要解决 每个表格周围都必须有边框 每个表格的列宽必须能够根据内容重新调整大小 但是 所有表中的列宽必须一致 即列的大小基于所有表中该列中最大的单元
  • 使用本机 JavaScript 获取过渡中的 CSS 值

    这个问题之前被问过 但答案使用了 jQuery here https stackoverflow com q 8920934 3186555 因此 我将调整问题以专门询问native解决方案 to 最小化依赖关系 假设您有一个 div 然后
  • javascript:window.print() 打印 2 页,而我有 1 页

    我有一个简单的 HTML 文档 其中仅包含图像标签 我想在文档加载后打印图像 我的代码 img src form1 jpg alt form1 style margin 0 auto display block 它可以工作 但问题是它打印图
  • 无法正确显示行

    我应该在这个问题的开头说我完全没有 html css javascript 背景 所以请对我宽容点 如果我使用了错误的术语或者问了一个愚蠢的问题 没有提供足够的信息 请抱歉 我正在尝试让一个可扩展的表工作 通过阅读论坛线程 教程 将 nex
  • 在 Android 上禁用标注(上下文菜单)

    在网络应用程序中 我需要禁用移动浏览器在触摸并按住 长按 触摸目标 例如 img 或链接 我已经在使用了 webkit touch callout none 它在 iPhone 和 iPad 上运行良好 但似乎不适用于 Android 在
  • 使用 python 在一个 html 页面中显示分割数据框的 HTML 代码

    我是 html css 新手 所以对以 html 格式显示的数据有疑问 我有一个很长的列表 我想将其拆分并以 html 格式显示为两个单独的列 例如 而不是 Col1 Col2 1 a 2 a 3 a 4 a 5 b 6 b 7 b 8 b
  • 在 ember-cli 中安装 Foundation 5

    我对 ember 相当陌生 对构建工具也很陌生 我目前正在使用通常的基础安装以及基础 cli 和指南针来编译我的 css 这有点痛苦 并且对于团队工作来说非常糟糕 我认为用 Bower 安装文件并使用会更好ember cli compass
  • Sass:@use 出错,未定义变量

    我正在使用 Sass 并且想要使用 use关键字而不是 import 因为 import有很多问题 另外只有dart sass支持这个功能 我将node sass改为dart sass 然而 问题出现了 我原来的代码 import carb
  • 浮动图像周围具有最小列宽的流动文本

    我想要一种方法来防止流动文本列变得太窄 例如 在一列 HTML 文本中 有一个图像浮动到左侧 正如预期的那样 文本沿着图像周围的列的右侧向下流动 但是 如果图像几乎与列一样宽 则文本最终会非常窄 在这种情况下 我希望文本简单地not流过图像
  • 滚动时的 CSS 背景模糊

    我有固定的背景图像 滚动时我希望图像变得模糊 我知道如何在 css 中进行模糊 但在特定的滚动位置进行 这是一个例子 https medium com good music f160ba9e6c52 https medium com goo
  • 固定 div 位于居中 div 旁边

    我有一个网页 其中有可滚动的内容 此内容包含在 content 内 位于页面的中心 现在我希望导航栏出现在内容左侧 50 像素处 该栏应具有固定位置 不应滚动 这是我到目前为止所尝试过的 nav position fixed top 50
  • 如何使用javascript确保元素仅在圆上朝一个方向移动?

    好吧 我承认我对三角学真的很糟糕 出于上下文的考虑 我将添加我在这里提到的问题中的内容 参考问题 https stackoverflow com a 39429290 168492 https stackoverflow com a 394
  • 导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包

随机推荐

  • n 个向量的交集

    我是编程新手 最近遇到了一个问题 即查找已排序整数的 n 个向量 整数向量 的交集 我想出的方法的复杂度为 O n 2 并且我正在使用 std set intersect 函数 我想出的方法是使用两个向量 第一个向量对应于我拥有的第一个向量
  • 每次调用都在 WCF 中进行身份验证

    我以完全断开连接的方式从 Silverlight 应用程序使用大量 WCF 服务 我想确保我知道调用每个服务的用户 但我不知道是否有 标准方式 我想到了一种登录方法来获取令牌 然后在每次调用中传递用户名及其令牌 以确保他 她已登录并有权执行
  • 如果多个字符在方案中彼此相邻,则从列表中删除它们

    我必须制作一个 Dr Racket 程序 如果列表中的字母与其本身相同 则将其从列表中删除 例如 z z f a b b d d 将变为 z f a b d 我已经为此编写了代码 但它所做的只是从列表中删除第一个字母 有人可以帮忙吗 lan
  • 在液体中连接数组

    我试图在 Liquid jekyll 中连接三个数组 但在最终数组 出版物 中我只得到第一个数组 论文 的元素 assign papers site publications where type paper sort date rever
  • 为什么同时使用匿名枚举和定义宏作为常量? [复制]

    这个问题在这里已经有答案了 为什么netinet in h这样定义常量 enum IPPROTO IP 0 define IPPROTO IP IPPROTO IP IPPROTO HOPOPTS 0 define IPPROTO HOPO
  • 无法从 Google Analytics 检索超过 10k 条记录

    我开发了一个 Windows 控制台应用程序 它提取 Google Analytics 数据并写入 CSV 文件 当在 Google Analytics 查询浏览器上查询特定日期的数据时 它显示 您的查询匹配 96782 个结果 问题是当我
  • Notepad++ 替换文本内的新行

    我有这个样本 因为它是一百万行中的一个 我有这样的文字 tr class even td a href http www ujk edu pl Jan Kochanowski University of Humanities and Sci
  • 如何在我的扫描仪之前调用 GUI 代码?

    在打开 GUI 窗口之前 我在从命令行获取输入时遇到一些问题 我之前在 Apple Exchange 上问过这个问题 但在我们确定这是一个编程问题后 我将其发送到这里 基本上 我在打开窗口之前运行扫描仪来获取用户输入 但它会启动程序 在我的
  • 尝试从.asp页面连接到远程mysql

    我正在尝试从经典 ASP 页面连接到远程 MySQL 数据库 当我在其中编写 VBScript 代码时 网站给出HTTP 500 Internal Server错误 我向房东核实过 他们说这不是他们的错误 请帮我
  • 递归还是迭代?

    我喜欢递归 我认为这让事情变得简单很多 另一个人可能不同意 我认为这也使代码更容易阅读 然而 我注意到递归在 C 等语言中的使用并不像在 LISP 中那样多 顺便说一下 由于递归 LISP 是我最喜欢的语言 有人知道在 C 等语言中是否有充
  • 使用对话框时背景模糊

    我希望对话框后面的背景变得模糊 我使用了这段代码 但它使整个背景变黑而不是模糊 dialog new Dialog context R style Theme Dialog Translucent dialog requestWindowF
  • Rails 3.2.4 SQL 查询在 find(:all) 上缓存结果

    我不完全确定该系统是否正在缓存数据 但它具有一些缓存特征 基本上我在搞乱 Rails 3 2 4 系统开始不显示一些结果 我认为这与我放入代码模型中的默认范围有关 但即使如此 这也应该显示所有结果 而不是十分之九 但是 我总是会丢失我创建的
  • 如何使用 Python 3.5 和 BeautifulSoup 抓取 href [重复]

    这个问题在这里已经有答案了 我想从网站上抓取每个项目的 href使用 Python 3 5 和 BeautifulSoup 这是我的代码 Loading Libraries import urllib import urllib reque
  • Google Maps API v3:自定义标记在移动设备上不可点击

    我们有一个网站 它使用 Google Maps API v3 在地图上显示一堆标记 这些标记是可点击的 并打开一个标准的谷歌地图信息弹出窗口 这在所有桌面浏览器上都非常有效 但由于某种原因 我无法让它在我测试过的任何移动设备 各种 Andr
  • jquery多维数组随机洗牌

    我想最小化我的代码 myArrayA 1 2 3 4 5 fisherYates myArrayA myArrayB 6 7 8 9 10 fisherYates myArrayB myArrayC 11 12 13 14 15 fishe
  • 我们可以在finally块中使用“return”吗[重复]

    这个问题在这里已经有答案了 我们可以使用 return 语句吗finally堵塞 这会导致任何问题吗 从a内返回finally阻塞会导致exceptions丢失 finally 块内的 return 语句将导致 try 或 catch 块中
  • OSX 以编程方式调用声级图形

    我有一个可以在 OSX 下更改音量的应用程序 它缺少的是按下声音上 下键时提供的视觉反馈 有谁知道如何以编程方式调用该行为 谢谢 以下是 George Warner 和 Casey Fleser 编写的一些代码 用于实现此目的 仔细想想这是
  • 对 Java 中另一个类中实例化/初始化的对象的引用变量

    我问的原因是因为我收到 NullPointerException 我现在这很容易 但我是一个相当新的编程人员 发现这有点令人困惑 假设我已经初始化了一个类中的一个对象 并且想要从另一个类访问同一对象 就像现在 我正在开发一个小型国际象棋游戏
  • Linux 中 Socket 的发送缓冲区为空?

    有没有办法检查 TCP 连接的发送缓冲区是否完全为空 到目前为止我还没有找到任何东西 只是想确保在仍有数据传输到某个客户端时我的服务器没有关闭连接 我正在使用轮询来检查是否能够在非阻塞套接字上发送数据 但这样我就无法知道是否所有内容都已发送
  • CSS多行省略号跨浏览器

    我的网页中有一个具有固定宽度和高度的 div 以下 css 仅适用于单行文本 overflow hidden text overflow ellipsis white space nowrap 如何使用具有跨浏览器兼容性的纯 css 在该