Question

我创建了一个自举网格表，有时会包含很长的文本。问题：如果文本太长，那么我的表行高度会在我的示例代码中看到。我想隐藏文字。

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.zeile {
  border: 1px solid red;
  overflow:hidden;
}

.row {
  margin-left: 0px;
  margin-right: 0px;
  display:table;
  width:100%;
}

.row .col-xs-2 {
  display:table-cell;
  float:none;
}

.row .col-xs-5 {
  display:table-cell;
  float:none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-xs-2 zeile" id="too_long">
        Very long text Very long text Very long
  </div>
  <div class="col-xs-5 zeile">
        Text
  </div>
  <div class="col-xs-5 zeile">
        Text
  </div>
</div>
<div class="row">
  <div class="col-xs-2 zeile">
        short text
  </div>
  <div class="col-xs-5 zeile">
        Text
  </div>
  <div class="col-xs-5 zeile">
        Text
  </div>
</div>

JSFIDDLE：https://jsfiddle.net/5L2w4yvr/

Answer 1

注意：我将布局从div更改为表布局。

当您使用Bootstrap时，重要的是您永远不要更改其原始css，至少不是网格系统本身，因为它很可能会在以后导致问题。

CSS：

td
{
    max-width: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

表格：

<table class="table table-responsive">
  <tr>
    <td class="col-xs-3">
      Test Very long text Very long text Very long Very long text Very long text Very long
    </td>
    <td class="col-xs-3">Test</td>
    <td class="col-xs-3">
      Test
    </td>
    <td class="col-xs-3">Test</td>
  </tr>
</table>

jsFiddle

Answer 2

解决方案1：它有效，但它有固定的宽度：jsfiddle

.row .col-xs-2 {
   display:table-cell;
   float:none;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

解决方案2：它没有固定宽度：jsfiddle

.zeile {
  border: 1px solid red;
  overflow:hidden;
}


.row {
   margin-left: 0px;
   margin-right: 0px;
   display:table;
   width:100%;

 }

 .row .col-xs-2 {
  display:table-cell;
  float:none;


  max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;


}

.row .col-xs-5 {
  display:table-cell;
  float:none;
 }

 .col-xs-5 , .col-xs-2 {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
  .col-xs-2 {
    width: 30%;
  }
  .col-xs-5  {
    width: 70%;
  }

Answer 3

看看

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.zeile {
  border: 1px solid red;
  overflow:hidden;
}


.row {
  margin-left: 0px;
  margin-right: 0px;
  display:table;
  width:100%;
}

.row .col-xs-2 {
  display:table-cell;
  float:none;
}

.row .col-xs-5 {
  display:table-cell;
  float:none;
}
.row {
table-layout: fixed; 
}
.row {
table-layout: fixed; 
}

.row .col-xs-2 {        
display: table-cell;
float: none;
width: 20%;
text-overflow: ellipsis;
white-space: nowrap;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-xs-2 zeile" id="too_long">
        Very long text Very long text Very long
  </div>
  <div class="col-xs-5 zeile">
        Text
  </div>
  <div class="col-xs-5 zeile">
        Text
  </div>
</div>
<div class="row">
  <div class="col-xs-2 zeile">
        short text
  </div>
  <div class="col-xs-5 zeile">
        Text
  </div>
  <div class="col-xs-5 zeile">
        Text
  </div>
</div>

Answer 4

试试这个

set -m

如何在twitter-bootstrap网格表中隐藏太长的文本？

4 个答案: