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

时间：2017-04-05 11:13:50

标签： javascript html css

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

表的结构总是相同的：

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

问题：

有些行包含长单词，例如＆＃34; intentalamazingtoostrongawesomeness＆＃34; ，它们不会在行中断，而是拉伸整个表。这在智能手机上并不好。我确实创建了一个片段来说明问题。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

解决方案：

我想缩短表格中的单词，例如＆＃34; intentionalamazingtoo ...＆＃34; ，而单词应该尽可能长。我怎样才能做到这一点？

Demo table with simulated solution

要求：

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

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

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

6 个答案:

答案 0 :(得分：4)

您可以将public与text-overflow: ellipsis;结合使用，具体取决于具体情况，它可以很好地为您做好准备

答案 1 :(得分：2)

你可以这样做：

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

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

答案 2 :(得分：1)

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

＆＃13;
＆＃13; 
$(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;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：1)

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

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

HTML标记如下：

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

使用此CSS设置flexbox：

    $query-> innerJoinWith(['askPos'])
          ->andwhere(['ask_policy.id'=>'ask_po.id_policy'])
          ->innerjoinWith(['client'])->andWhere(['id_client'=>Yii::$app->user->identity->id_client])->all();



**in yii debug show me sql  : **
`SELECT `ask_policy`.* FROM `ask_policy` INNER JOIN `ask_po` ON `ask_policy`.`id` = `ask_po`.`id_policy` INNER JOIN `ask_client` ON `ask_policy`.`id_client` = `ask_client`.`id` WHERE (`ask_policy`.`id`='ask_po.id_policy') AND (`id_client`=930);`

答案 4 :(得分：1)

我认为通过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>

答案 5 :(得分：0)

或者当大于初始宽度时，你可以将它显示在多条线上：

span.text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
相关问题
最新问题