草庐IT

css 带省略号的自动换行

coder 2023-08-07 原文

仅使用 CSS，我想要自动换行，然后在垂直填充容器后使用省略号。根据研究，如果 white-space: nowrap 我只能使用省略号 - 这只会给我一行。

context 是一个已知高度和可变宽度的父 div，带有一个子 a 元素，如果它不在 max-height: 100%，则它应该始终垂直居中。

如果 display: table 在父级中，并且 display: table-cell 和 max-height: xxx 似乎应该可以工作, text-overflow: ellipsis 在 child 中指定。

我不认为这要求很多，但已经晚了，我可能会遗漏一些东西。是否有名为 still-cant-be-done-in-html5.com 的网站？

Fiddle

最佳答案

有一个 webkit-only 功能叫做“line clamping”，它可以实现我认为你正在寻找的功能。不幸的是，它是非标准的，目前没有计划(至少我知道)使其成为任何标准的一部分。

https://css-tricks.com/line-clampin/

这将使用以下 CSS 来完成:

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
}

使用此代码，如果元素的内容用文本填充超过 3 行，它将在第三行用省略号截断。

有几个不同的 JavaScript 库试图完成类似的事情，您可以在我包含在此答案中的链接中看到它们。不幸的是，使用标准 CSS，text-overflow: ellipsis 仅限于一行。

或者，目前有a thread about "region fragments"在 W3C 邮件列表中以及如何使用它们来制作多行元素带有省略号，但该规范仍处于草案阶段，可能需要数年时间才能使其进入任何浏览器。

关于css 带省略号的自动换行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29910523/

css带codesectionnoreferrerhtml

有关css 带省略号的自动换行的更多相关文章

  1. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇，就使用ruby​​onrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提

  2. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  3. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样？我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用，需要1秒才能返回，我有100,000多个页面要访问，所以我试图运行多个线程来解决这个问题。有更好的方法吗？classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  4. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  5. ruby-on-rails - 从应用程序中自定义文件夹内的命名空间自动加载 - 2

    我们目前正在为ROR3.2开发自定义cms引擎。在这个过程中，我们希望成为我们的rails应用程序中的一等公民的几个类类型起源，这意味着它们应该驻留在应用程序的app文件夹下，它是插件。目前我们有以下类型:数据源数据类型查看我在app文件夹下创建了多个目录来保存这些:应用/数据源应用/数据类型应用/View更多类型将随之而来，我有点担心应用程序文件夹被这么多目录污染。因此，我想将它们移动到一个子目录/模块中，该子目录/模块包含cms定义的所有类型。所有类都应位于MyCms命名空间内，目录布局应如下所示:应用程序/my_cms/data_source应用程序/my_cms/data_ty

  6. ruby-on-rails - 有没有一种工具可以在编码时自动保存对文件的增量更改？ - 2

    我最喜欢的Google文档功能之一是它会在我工作时不断自动保存我的文档版本。这意味着即使我在进行关键更改之前忘记在某个点进行保存，也很有可能会自动创建一个保存点。至少，我可以将文档恢复到错误更改之前的状态，并从该点继续工作。对于在MacOS(或UNIX)上运行的Ruby编码器，是否有具有等效功能的工具？例如，一个工具会每隔几分钟自动将Gitcheckin我的本地存储库以获取我正在处理的文件。也许我有点偏执，但这点小保险可以让我在日常工作中安心。 最佳答案 虚拟机有些人可能讨厌我对此的回应，但我在编码时经常使用VIM，它具有自动保存功

  7. ruby - 代码块中的 Markdown 换行符 - 2

    使用Redcarpet，当我在Markdown中包含类似以下内容时，它不考虑任何换行符或缩进。我在行尾尝试了两个空格。代码之间的额外行。似乎没有任何效果。```xml3```我明白了:3这里是Redcarpet设置:Redcarpet::Markdown.new(Redcarpet::Render::HTML,:autolink=>true,:space_after_headers=>true,:fenced_code_blocks=>true,:no_intra_emphasis=>true,:lax_html_blocks=>true)我需要做什么才能正确换行并保留缩进，就像这里或

  8. ruby - Cucumber/Savon 省略或删除日志输出 - 2

    在运行Cucumber测试时，我得到(除了测试结果)大量调试/日志相关的输出形式:D,[2013-03-06T12:21:38.911829#49031]DEBUG--:SOAPrequest:D,[2013-03-06T12:21:38.911919#49031]DEBUG--:Pragma:no-cache,SOAPAction:"",Content-Type:text/xml;charset=UTF-8,Content-Length:1592W,[2013-03-06T12:21:38.912360#49031]WARN--:HTTPIexecutesHTTPPOSTusingt

  9. ruby - 在 ruby​​ 中使用自动创建插入数组 - 2

    我想知道是否可以通过自动创建数组来插入数组，如果数组不存在的话，就像在PHP中一样:$toto[]='titi';如果尚未定义$toto，它将创建数组并将“titi”压入。如果已经存在，它只会推送。在Ruby中我必须这样做:toto||=[]toto.push('titi')可以一行完成吗？因为如果我有一个循环，它会测试“||=”，除了第一次:Person.all.eachdo|person|toto||=[]#with1billionofperson,thislineisuseless999999999times...toto.push(person.name)你有更好的解决方案吗？

  10. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

随机推荐