html - 截断表格单元格中的溢出文本，因此表格不会比屏幕宽

coder 2023-08-12 原文

我正在尝试以表格格式显示各种元素(每个条目都有各种属性)。还需要以下内容:

列应该是动态的以便紧密贴合内容，没有固定宽度(由表格布局处理)
行应该可以点击以激活对该行条目的操作，例如显示包含该内容扩展版本的新页面(使用 CSS display: table/table-row/table-cell 而不是 <table>/<tr>/<td> 处理 - 根据示例代码)。 (我的另一个原因是我使用 JSF，它生成 HTML，但有点让我坚持使用它。)
我无法做到这一点:如果可能，表格不应超出屏幕宽度。特别是，“摘要”列显示(可能很长)文本，必要时将被截断，因此文本适合适合表格宽度的单元格，表格宽度可能不会比屏幕宽度宽。
- 我使用 CSS text-overflow: ellipsis在此摘要上，连同其他需要的设置。因为周边<div>已经有 display: table-cell , 而 ellipsis属性 needs an inline/block element ，“摘要”文本包裹在另一个 <div> 中.

这是所需效果的示例(注意底部没有滚动条):

虽然这是我目前能够实现的(不理想)(请注意底部的滚动条 - 表示表格在右侧窗口外运行):

这是实现此目的的准系统代码(可以省略所有标有 /*l&f*/ 的属性(外观)，它们仅用于生成外观更清晰、更易于调试的示例)。

CSS 和 HTML:

A {
  /*l&f*/text-decoration: inherit;
  /*l&f*/color: inherit;
}
.list-table {
  display: table;
  /*l&f*/border: 1px solid blue;
  /*l&f*/border-spacing: 5px;
}
.list-tr {
  display: table-row;
  /*l&f*/background-color: lightgray;
}
.list-td {
  display: table-cell;
  white-space: nowrap; /* one line */
  /*l&f*/padding: 2px; border : 1px solid green;
  /*l&f*/border: 1px solid red;
}
.summary {
  display: block;
  white-space: nowrap; /* one line */
  overflow: hidden; /* make text overflow */
  text-overflow: ellipsis; /* truncate tex with ... */
  /*l&f*/background-color: lightblue;
}

<div class="list-table">
  <a href="#1" class="list-tr">
    <div class="list-td">Row 1</div>
    <div class="list-td">More stuff</div>
    <div class="list-td">
      <div class="summary">Some single line run on text goes here</div>
    </div>
  </a>

  <a href="#2" class="list-tr">
    <div class="list-td">Row 2</div>
    <div class="list-td">Other column</div>
    <div class="list-td">
      <div class="summary">This is text content that runs on and on
        and on without end and may need to be truncated somewhere on the
        summary screen depending on screen size to show only the first part
        that will fit.</div>
    </div>
  </a>

  <a href="#3" class="list-tr">
    <div class="list-td">Row 3</div>
    <div class="list-td">Still other content</div>
    <div class="list-td">
      <div class="summary">Here is still more long text that may
        need truncation in the summary version because it is so long.</div>
    </div>
  </a>
</div>

我已经能够通过 display: -moz-box 获得预期的结果(以及各种其他 -moz- 设置)，在 summary 中风格。不高兴，因为这不是跨平台的。

您有什么更好的建议吗？非常感谢您的帮助:-)

最佳答案

如果您可以对导出的 HTML 进行更改，那么您就有了一个可能的解决方案。

我对您的 HTML 做了一些更改(向 .summary 添加了父 div，以使用 table-layout:fixed 创建固定表格)

请参阅下面的片段:

A {
  /*l&f*/
  text-decoration: inherit;
  /*l&f*/
  color: inherit;
}
.list-table {
  display: table;
  /*l&f*/
  border: 1px solid blue;
  /*l&f*/
  border-spacing: 5px;
  width: 100%; /* ADDED */
}
/* CREATED */
.fixed-table {
  width:100%;
  table-layout: fixed;
  display:table
}

.list-tr {
  display: table-row;
  /*l&f*/
  background-color: lightgray;
}
.list-td {
  display: table-cell; /* CHANGED */
  white-space: nowrap;
  /* one line */
  /*l&f*/
  padding: 2px;
  border: 1px solid green;
  /*l&f*/
  border: 1px solid red;
}
.summary {
  display: table-cell;
  /*l&f*/
  background-color: lightblue;
  white-space: nowrap;
  /* one line */
  overflow: hidden;
  /* make text overflow */
  text-overflow: ellipsis;
  /* truncate texT with ... */
}

<div class="list-table">
  <a href="#1" class="list-tr">
    <div class="list-td">Row 1</div>
    <div class="list-td">More stuff</div>
    <div class="list-td">
      <div class="fixed-table">
        <div class="summary">Some single line run on text goes here</div>
      </div>
    </div>
  </a>

  <a href="#2" class="list-tr">
    <div class="list-td">Row 2</div>
    <div class="list-td">Other column</div>
    <div class="list-td">
      <div class="fixed-table">
        <div class="summary">This is text content that runs on and on and on without end and may need to be truncated somewhere on the summary screen depending on screen size to show only the first part that will fit.</div>
      </div>
    </div>
  </a>

  <a href="#3" class="list-tr">
    <div class="list-td">Row 3</div>
    <div class="list-td">Still other content</div>
    <div class="list-td">
      <div class="fixed-table">
        <div class="summary">Here is still more long text that may need truncation in the summary version because it is so long.</div>
      </div>
    </div>
  </a>
</div>

关于html - 截断表格单元格中的溢出文本，因此表格不会比屏幕宽，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34921362/

有关html - 截断表格单元格中的溢出文本，因此表格不会比屏幕宽的更多相关文章

ruby - 如何从 ruby 中的字符串运行任意对象方法？ - 2
总的来说，我对ruby还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用
ruby - 其他文件中的 Rake 任务 - 2
我试图在一个项目中使用rake，如果我把所有东西都放到Rakefile中，它会很大并且很难读取/找到东西，所以我试着将每个命名空间放在lib/rake中它自己的文件中，我添加了这个到我的rake文件的顶部:Dir['#{File.dirname(__FILE__)}/lib/rake/*.rake'].map{|f|requiref}它加载文件没问题，但没有任务。我现在只有一个.rake文件作为测试，名为“servers.rake”，它看起来像这样:namespace:serverdotask:testdoputs"test"endend所以当我运行rakeserver:testid时
ruby-on-rails - Ruby net/ldap 模块中的内存泄漏 - 2
作为我的Rails应用程序的一部分，我编写了一个小导入程序，它从我们的LDAP系统中吸取数据并将其塞入一个用户表中。不幸的是，与LDAP相关的代码在遍历我们的32K用户时泄漏了大量内存，我一直无法弄清楚如何解决这个问题。这个问题似乎在某种程度上与LDAP库有关，因为当我删除对LDAP内容的调用时，内存使用情况会很好地稳定下来。此外，不断增加的对象是Net::BER::BerIdentifiedString和Net::BER::BerIdentifiedArray，它们都是LDAP库的一部分。当我运行导入时，内存使用量最终达到超过1GB的峰值。如果问题存在，我需要找到一些方法来更正我的代
ruby-on-rails - Rails 3 中的多个路由文件 - 2
Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情？最佳答案在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中，使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件，我们在StackOverflow上找到一个类似的问题
ruby - 使用 ruby 将 HTML 转换为纯文本并维护结构/格式 - 2
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。最佳答案首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
ruby-on-rails - Rails - 一个 View 中的多个模型 - 2
我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何
ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2
我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer
ruby - Highline 询问方法不会使用同一行 - 2
设置:狂欢ruby1.9.2高线(1.6.13)描述:我已经相当习惯在其他一些项目中使用highline，但已经有几个月没有使用它了。现在，在Ruby1.9.2上全新安装时，它似乎不允许在同一行回答提示。所以以前我会看到类似的东西:require"highline/import"ask"Whatisyourfavoritecolor?"并得到:Whatisyourfavoritecolor?|现在我看到类似的东西:Whatisyourfavoritecolor?|竖线(|)符号是我的终端光标。知道为什么会发生这种变化吗？最佳答案
ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗？ - 2
刚入门rails，开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗？有哪些用例。您如何为Rails应用程序使用应用程序Controller？我不想在那里放太多代码，因为据我了解，每个请求都会调用此Controller。这是真的？最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度，尽管在某些情况下ApplicationContr
ruby-on-rails - form_for 中不在模型中的自定义字段 - 2
我想向我的Controller传递一个参数，它是一个简单的复选框，但我不知道如何在模型的form_for中引入它，这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框，但我该怎么做，模型中没有一个对象，而是一个要检查的对象，以便在Controller中创建一个ifelse，如果没有检查，请帮助我，非常感谢,谢谢

html - 截断表格单元格中的溢出文本，因此表格不会比屏幕宽

有关html - 截断表格单元格中的溢出文本，因此表格不会比屏幕宽的更多相关文章

随机推荐