缩短响应式表格中单词的最佳方法答案

【问题标题】：Best way to shorten words in responsive tables缩短响应式表格中单词的最佳方法
【发布时间】：2025-12-02 03:50:02
【问题描述】：

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

表格的结构总是相同的：

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

问题：

有些行有一个长而单一的单词，例如“intentionalamazingtoostrongawesomeness”，它们不会断行而是拉伸整个表格。这在智能手机上并不好。我确实创建了一个 sn-p 来说明问题。

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 包含文本和缩短的单词没有固定宽度。两者都应该尽可能大/长。

如开头所说，只要按上述方式工作，就可以使用 div 代替表格、flex-box 系统或任何其他 html 标记。

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

【问题讨论】：

css-tricks.com/snippets/css/truncate-string-with-ellipsis
CSS 见*.com/questions/802175/…; *.com/questions/33058004/…; *.com/questions/536814/…。这些问题中还有一些 JS 解决方案。

标签： javascript html css

【解决方案1】：

如果单个列是可调整的，则 flexbox 模型可以工作，如this jsfiddle 所示（您可以修改右侧面板宽度以测试行为）。代码改编自Blender给出的this answer。如您的问题所述：

网格尽可能宽，以填充容器宽度
文本列宽可调；其他列宽是固定的
必要时会截断文本以避免换行
不涉及 Javascript 或 jQuery 代码，仅涉及 HTML 和 CSS

HTML 标记如下：

<div class="wrapper-div">
    <div class="icon-div">
        <div class="icon"></div>
    </div>
    <div class="text-div">Lorem ipsum dolor</div>
    <div class="icon-div">
        <div class="icon"></div>
    </div>
    <div class="number-div">24</div>
</div>
<div class="wrapper-div">
    <div class="icon-div">
        <div class="icon"></div>
    </div>
    <div class="text-div"><strong>I_am_the_long_trouble_maker_that_stretches</strong></div>
    <div class="icon-div">
        <div class="icon"></div>
    </div>
    <div class="number-div">8</div>
</div>
...

flexbox 是用这个 CSS 设置的：

.wrapper-div {
    display: flex;
    align-items: center;
}

.icon-div {
    flex: 0 0 auto;  /* Width adjusted to content, not allowed to grow or shrink */
    padding: 4px 6px;
}

.text-div {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 0 0px;   /* Adjustable width, will grow to take available space */
}

.number-div {
    flex: 0 0 32px;  /* Width set to 32px, not allowed to grow or shrink */
}

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

【讨论】：

【解决方案2】：

我认为最好缩短单词并通过 Javascript 添加 READ MORE 和 READ LESS。代码如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
    <p class="more" style="text-align: justify; margin: 5px; padding: 0px; font-size: 15px; line-height: 16px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <script type="text/javascript">
        $(document).ready(function() {
        // Configure/customize these variables.
        var showChar = 500 // How many characters are shown by default
        var ellipsestext = "...";
        var moretext = "Read More ";
        var lesstext = "Read Less";


        $('.more').each(function() {
            var content = $(this).html();

            if(content.length > showChar) {

                var c = content.substr(0, showChar);
                var h = content.substr(showChar, content.length - showChar);

                var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

                $(this).html(html);
            }

        });

        $(".morelink").click(function(){
            if($(this).hasClass("less")) {
                $(this).removeClass("less");
                $(this).html(moretext);
            } else {
                $(this).addClass("less");
                $(this).html(lesstext);
            }
            $(this).parent().prev().toggle();
            $(this).prev().toggle();
            return false;
        });
    });
    </script>
</body>
</html>

【讨论】：

【解决方案3】：

对于 JavaScript 解决方案，您可以使用 RegExp replace。您可以根据设备大小更改字符限制：

$(truncateText);

function truncateText() {
  var maxlength = 200;
  var screenWidth = window.innerWidth;
  if(screenWidth < 700) {
    maxlength = 23;
  }
  var regExp = new RegExp('([^\\s<>]{' + maxlength + '})([^\\s<>]+)','gi');
  $('#wrapper table .text').each(function(i, el) {
    var $el = $(el);
    var html = $el.data('full');
    if(!html) {
      $el.data('full', $el.html());
      html = $el.html();
    }
    $el.html(html.replace(regExp, '$1...'));
  });
}

window.onresize = truncateText;

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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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>
  </table>
</div>

【讨论】：

【解决方案4】：

或者你可以让它在大于初始宽度时显示在多行上：

span.text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

【讨论】：

-webkit-line-clamp：3；只能在 webkit 浏览器中作为 Chrome (caniuse.com/#feat=css-line-clamp) 工作。在 Firefox 上，您可以通过从透明淡入到 bg-color 来欺骗它，并创建具有最大高度的线夹错觉，使用 line-height * font-size *lines_to_show 计算。如果您使用 SCSS 或 LESS，您可以使用 mixin 快速实现，否则您必须手动计算并创建情境。
@Dinca Adrian -webkit-line-clamp：3；只能在 webkit 浏览器中作为 Chrome >>> 我不知道，感谢您的提醒 ;-)
任何以-webkit 为前缀的内容仅适用于Webkit 浏览器、Fusion。 Chrome 使用 Blink，它是 WebKit 的一个分支。 Webkit 最初只被 Safari 使用。另外两个是壁虎（FF）和三叉戟（IE家族）。 Full list here.

【解决方案5】：

你可以这样做：

td {
  border-bottom: 1px solid #d3d6db;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;  
}

更新片段：

http://jsbin.com/qucavebebu/1/edit?html,css,output

但请注意，它应该有一个预定义的宽度。

【讨论】：

【解决方案6】：

您可以根据上下文使用text-overflow: ellipsis; 可能与white-space: nowrap; 结合使用，它应该可以很好地为您解决问题

【讨论】：