在构建包含大量数据的接口(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 上运行。
最佳答案
您可以使用 text-overflow: ellipsis;
可能与 white-space: nowrap;
结合使用,这取决于上下文,它应该能很好地为您完成任务
关于javascript - 缩短响应表中单词的最佳方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43229551/