javascript - 缩短响应表中单词的最佳方法

Question

在构建包含大量数据的接口(interface)时，有一些 <table>需要响应的元素。当然可以替换<table>与任何其他类型的元素。

表的结构总是相同的:

• 所有的列都非常小并且可以有固定的宽度
• 除了一列，有时包含需要缩短的单词

问题:

有些行只有一个长单词，例如“intentionalamazingtoosongawesomeness”，它们不会换行而是会拉长整个表格。这在智能手机上并不好。我确实创建了一个片段来说明问题。

body {
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
}

#wrapper {
  background: #eaeaea;
  width: 320px;
  margin: 0 auto;
}

#wrapper table {
  width: 100%;
  vertical-align: middle;
}

#wrapper .icon {
  background: #8da2b5;
  border-radius: 3px;
  display: block;
  height: 23px;
  width: 23px;
}

td {
  border-bottom: 1px solid #d3d6db;
}

td:nth-child(1) {
  padding: 10px;
}


/* demo styles */

body {
  background: #e4e8eb;
}

#wrapper {
  border: 1px solid #d3d6db;
  background: #f0f4f7;
  color: #63778b;
}

#legend {
  color: #63778b;
  width: 320px;
  margin: 40px auto 10px;
  font-size: 11px;
  text-transform: uppercase;
}

<div id="legend">|--------- This is the smallest width necessary ----------|</div>
<div id="wrapper">
  <table cellspacing="0">
    <tr>
      <td><span class="icon"></span></td>
      <td><span class="text">Lorem ipsum dolor.</span></td>
      <td><span class="icon"></span></td>
      <td><span class="number">123</span></td>
    </tr>
    <tr>
      <td><span class="icon"></span></td>
      <td><span class="text"><strong>I_am_the_long_trouble_maker_that_stretches</strong> asdasdasd</span></td>
      <td><span class="icon"></span></td>
      <td><span class="number">42</span></td>
    </tr>
    <tr>
      <td><span class="icon"></span></td>
      <td><span class="text">Sint, itaque, cupiditate Lorem ipsum dolor sit..</span></td>
      <td><span class="icon"></span></td>
      <td><span class="number">16</span></td>
    </tr>
    <tr>
      <td><span class="icon"></span></td>
      <td><span class="text">Velit et, laudantium?</span></td>
      <td><span class="icon"></span></td>
      <td><span class="number">24</span></td>
    </tr>
    <tr>
      <td><span class="icon"></span></td>
      <td><span class="text">Architecto, dolorem, cum!</span></td>
      <td><span class="icon"></span></td>
      <td><span class="number">13</span></td>
    </tr>
    <tr>
      <td><span class="icon"></span></td>
      <td><span class="text">Dolore, neque molestias.</span></td>
      <td><span class="icon"></span></td>
      <td><span class="number">24</span></td>
    </tr>
    <tr>
      <td><span class="icon"></span></td>
      <td><span class="text">Ratione, reprehenderit, deserunt.</span></td>
      <td><span class="icon"></span></td>
      <td><span class="number">52</span></td>
    </tr>
    <tr>
      <td><span class="icon"></span></td>
      <td><span class="text">Quidem, in, excepturi?</span></td>
      <td><span class="icon"></span></td>
      <td><span class="number">41</span></td>
    </tr>
    <tr>
      <td><span class="icon"></span></td>
      <td><span class="text">Voluptates, aperiam eos.</span></td>
      <td><span class="icon"></span></td>
      <td><span class="number">75</span></td>
    </tr>
    <tr>
      <td><span class="icon"></span></td>
      <td><span class="text">Explicabo delectus, illum.</span></td>
      <td><span class="icon"></span></td>
      <td><span class="number">45</span></td>
    </tr>
    <tr>
      <td><span class="icon"></span></td>
      <td><span class="text">Facilis, provident, debitis!</span></td>
      <td><span class="icon"></span></td>
      <td><span class="number">24</span></td>
    </tr>
    <tr>
      <td><span class="icon"></span></td>
      <td><span class="text">Corrupti, itaque voluptatem!</span></td>
      <td><span class="icon"></span></td>
      <td><span class="number">25</span></td>
    </tr>
    <tr>
      <td><span class="icon"></span></td>
      <td><span class="text">Expedita, ea, ab.</span></td>
      <td><span class="icon"></span></td>
      <td><span class="number">41</span></td>
    </tr>
    <tr>
      <td><span class="icon"></span></td>
      <td><span class="text">Necessitatibus, reiciendis, quisquam.</span></td>
      <td><span class="icon"></span></td>
      <td><span class="number">24</span></td>
    </tr>
    <tr>
      <td><span class="icon"></span></td>
      <td><span class="text">Quis, rem facilis!</span></td>
      <td><span class="icon"></span></td>
      <td><span class="number">35</span></td>
    </tr>
    <tr>
      <td><span class="icon"></span></td>
      <td><span class="text">Porro, ullam, esse.</span></td>
      <td><span class="icon"></span></td>
      <td><span class="number">14</span></td>
    </tr>
    <tr>
      <td><span class="icon"></span></td>
      <td><span class="text">Eveniet, laboriosam, in.</span></td>
      <td><span class="icon"></span></td>
      <td><span class="number">64</span></td>
    </tr>
    <tr>
      <td><span class="icon"></span></td>
      <td><span class="text">Est, nisi, dicta!</span></td>
      <td><span class="icon"></span></td>
      <td><span class="number">74</span></td>
    </tr>
    <tr>
      <td><span class="icon"></span></td>
      <td><span class="text">Iste, et, autem!</span></td>
      <td><span class="icon"></span></td>
      <td><span class="number">24</span></td>
    </tr>
    <tr>
      <td><span class="icon"></span></td>
      <td><span class="text">Mollitia, delectus, magnam!</span></td>
      <td><span class="icon"></span></td>
      <td><span class="number">52</span></td>
    </tr>
  </table>
</div>

解决方案:

我想缩短表格中的单词，例如“intentionalamazingtoo...”，同时单词应该尽可能长。我怎样才能做到这一点？

Demo table with simulated solution

要求:

<td> 没有固定宽度或 table包含文本和缩短的单词。两者都应尽可能大/长。

如开头所述，使用 divs 代替表格、flex-box 系统或任何其他 html 标记是可以的，只要它能像上面描述的那样工作。

我确实更喜欢纯 css 解决方案，因为我不习惯 javascript，而表格被包裹在一个巨大的 javascript 组件中。该应用程序在 Meteor 和 TypeScriptReact 上运行。

Answer 1

您可以使用 text-overflow: ellipsis; 可能与 white-space: nowrap; 结合使用，这取决于上下文，它应该能很好地为您完成任务