web-dev-qa-db-ja.com

Bootstrap 3テーブルの行内の長いテキストをレスポンシブに切り捨てます

私はbootstrap 3テーブルを使用しています。テーブルに大きなテキストを入れると、複数行に折り返されますが、最後に3つのドットで切り捨てて、応答する方法で混乱しないようにします。テーブルのレイアウト（いくつかの解決策を見つけましたが、不快な効果があります）。

それは可能ですか？どうやって ？

PS：どんなソリューションでも歓迎しますが、可能であれば、HTML/CSSにしたいと思います。

csshtml5css3twitter-bootstrap-3responsive-design
39
Xsmael

このようにしました（クラスtextを<td>に追加し、<span>の間にテキストを配置する必要があります。

HTML

<td class="text"><span>looooooong teeeeeeeeext</span></td>

SASS

.table td.text {
    max-width: 177px;
    span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: Ellipsis;
        display: inline-block;
        max-width: 100%;
    }
}

CSS同等

.table td.text {
    max-width: 177px;
}
.table td.text span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: Ellipsis;
    display: inline-block;
    max-width: 100%;
}

また、モバイルレスポンシブのままで（layout = fixedで忘れてください）、元の動作を維持します。

PS：もちろん177pxはカスタムサイズです（必要なものは何でも入れてください）。

26
Luciano Fantuzzi

CSS省略記号がテーブルセルで機能するには、table-layout:fixedを使用する必要があります。

.table {
  table-layout:fixed;
}

.table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: Ellipsis;
}

demo： http://bootply.com/9njmoY2CmS

60
Zim

ブートストラップを使用しています。
cssパラメーターを使用しました。

.table {
  table-layout:fixed;
}

.table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: Ellipsis;
}

このようなbootstrapグリッドシステムパラメーター。

<th class="col-sm-2">Name</th>

<td class="col-sm-2">hoge</td>
2
Yusuke Okui

これは私が達成したことですが、幅を設定する必要があり、それは割合的ではありません。

.trunc{
  width:250px; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: Ellipsis;
}
table tr td {
padding: 5px
}
table tr td {
background: salmon
}
table tr td:first-child {
background: lightsalmon
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table>
      
      <tr>
        <td>Quisque dignissim ante in tincidunt gravida. Maecenas lectus turpis</td>
      <td>
         <div class="trunc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
         </div>
    </td>
        </tr>
      </table>

またはこれ： http://collaboradev.com/2015/03/28/responsive-css-truncate-and-Ellipsis/

2
egidiocs