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

While building an interface with lots of data, there are some <table> elements, that need to be responsive. Of course it is possible to replace <table> with any other kind of element.

在构建包含大量数据的接口时,有一些

元素需要响应。当然可以用任何其他类型的元素替换

。

The structure of the tables are always the same:

表的结构总是相同的:

all columns are really small and can have a fixed width

所有列都很小,可以有固定的宽度

except for one column, that sometimes contains words that need to be shortened

除了一列,有时包含需要缩短的单词

Problem:

There are some rows with a long and single word, like "intentionalamazingtoostrongawesomeness", which do not break in lines but stretch the whole table. This is not good on smartphones. I did create a snippet to illustrate the problem.

有些行有一个长而单一的单词,比如“intentionalamazingtoostrongawesomeness”,它们不会破坏行,而是拉伸整个表。这在智能手机上并不好。我确实创建了一个片段来说明问题。

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>

Solution:

I want to shorten the words inside the table, like "intentionalamazingtoo…", while the word should be as long as possible. How can I achieve this?

我想缩短表格中的单词,比如“intentalamazingtoo ......”,而这个词应该尽可能长。我怎样才能做到这一点?

Demo table with simulated solution

演示表与模拟解决方案

Requirements:

There is no fixed width for the <td> or table containing text and the shortened word. Both should be as large/long as possible.

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

As said at the beginning, it is ok to use divs instead of tables, a flex-box system or any other html markup, as soon as it works as described above.

正如开头所说,只要它如上所述,就可以使用div而不是表格,弹性框系统或任何其他html标记。

I do prefer a css only solution, as I am not used to javascript, while the table is wrapped in a huge javascript component. The app is running on Meteor and TypeScriptReact.

我更喜欢只有css的解决方案,因为我不熟悉javascript,而表格包含在一个巨大的javascript组件中。该应用程序在Meteor和TypeScriptReact上运行。

6 个解决方案

#1

The flexbox model works if a single column is adjustable, as shown in this jsfiddle (you can modify the right panel width to test the behavior). The code is adapted from this answer given by Blender. As specified in your question:

如果单个列可调,flexbox模型可以工作,如此jsfiddle所示(您可以修改右面板宽度以测试行为)。该代码改编自Blender给出的答案。如您的问题中所述:

The grid is as wide as possible, to fill the container width

网格尽可能宽,以填充容器宽度

The text column width is adjustable; other column widths are fixed

文本列宽可调;其他列宽是固定的

The text is truncated when necessary to avoid wrapping

必要时会截断文本以避免包装

No Javascript or jQuery code is involved, only HTML and CSS

不涉及Javascript或jQuery代码,只有HTML和CSS

The HTML markup is as follows:

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>
...

The flexbox is set with this CSS:

使用此CSS设置flexbox:

.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

You could use text-overflow: ellipsis; maybe in conjunction with white-space: nowrap; depending on context and it should do the trick nicely for you

你可以使用文本溢出:省略号;也许与白色空间结合:nowrap;取决于上下文,它应该很好地为你做

#3

You can do this:

你可以这样做:

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

Updated Snippet:

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

But beware, it should have a pre defined width.

但要注意,它应该具有预定义的宽度。

#4

For a JavaScript solution you could use RegExp replace. You can change the character limit depending on the device size:

对于JavaScript解决方案,您可以使用RegExp替换。您可以根据设备大小更改字符数限制:

$(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>

#5

I think it's better to make the word shorten and add READ MORE AND READ LESS via Javascript. Code are the following below:

我认为最好缩短这个词,并通过Javascript添加READ MORE AND 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>

#6

Or you could have it display on mutiple lines as follow when larger than the initial width:

或者,当大于初始宽度时,您可以将其显示在多条线上,如下所示:

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

#1