web-dev-qa-db-ja.com

BootStrap Table text EllipsisはレスポンシブWebでは使用できませんか？

TableタグにString Ellipsisを実装しようとしています。

ソースコードは以下です。

<div>
  <div class="widget-body no-padding" style="min-height:0px;">
    <table class="table" style="table-layout: fixed;">
      <tbody>
        <c:forEach var="item" items="${result.stuffList}" varStatus="idx">
          <c:if test="${idx.index < 5}">
            <tr>
              <td class='text-center' style="width: 80%; text-overflow:Ellipsis; -o-text-overow: Ellipsis; Word-wrap:normal; overflow: hidden;">
                <nobr>
                  <a href="#" onclick="javascript:location.href='/view?nid=${item.id}'">${item.name}</a>
                </nobr>
              </td>
              <td class='text-center' style="width: 20%;">
                ${item.regDate}
              </td>
            </tr>
          </c:if>
        </c:forEach>
      </tbody>
    </table>
  </div>
</div>

このコードは機能し、Stringが長すぎる場合は、...が期待したものを示します。

ただし、レスポンシブテストを行うと、見苦しくなります。

アイテムの登録日を表すために、次の部分を書きました。

ただし、ブラウザーが縮小すると、その背面部分は画面に表示されません。

<td class='text-center' style="width: 20%;">
  ${item.regDate}
</td>

すべてのブラウザでBootstrapでEllipsisを使用するにはどうすればよいですか？

このように見えます

期待したこと（ブラウザを縮小する場合）>>

列1 /列2

AAAA ..../2014-09-24

現在の外観>>

列1 /列2

AAAA ..../2014-09

問題は>>

String Ellipsis関数を追加する前に、レスポンシブに機能します。

私の推測>>

おそらくtable-layout: fixed;スタイルが原因です。 table-layoutなしでString Ellipsis関数を実装する方法がわかりません。

最初に尋ねたよりも明確になることを願っています：D

私は原因を持っています

問題は幅です：80%、width: 20%、table-layout:fixed。

そのため、ブラウザのサイズを変更すると、これらのオプションが使用されます。

しかし、私はまだそれを交換する方法を知りません。

これらはすべて、Webサイトの一部であるdivにあり、レスポンシブWebが必要です。

回答を選択した後に編集されました。

私の質問に答えてくれてありがとう！

しかし、私は原因を見つけましたが、これを修正できませんでした。

選択した答えは関係ありませんでしたが、役に立ちました。

私の問題はブートストラップではなく、幅によるものでした。

レスポンシブウェブライブラリを使用していても、

%またはpxプロパティで幅を使用する場合、応答できません。

csstwitter-bootstrapcross-browserhtml-tableellipsis
19
Juneyoung Oh

このすべてのスタイルをEllipsis要素に適用する必要があります。

{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: Ellipsis;
}
28
Darshak Shekhda

この投稿 のおかげで、固定テーブルを必要とせずに十分に反応するハーフワーキングソリューションが見つかりました。 FF 43でテストしました、Opera 34およびChrome 47）：

.ellipis {
    overflow: hidden;
    -ms-text-overflow: Ellipsis;
    -o-text-overflow: Ellipsis;
    text-overflow: Ellipsis;
    display: block;
    white-space: nowrap;
}

ただし、セルにデータが既に存在する場合、次の行にジャンプします...

5
Fabian

bootstrap=を使用している場合、text-nowrapこれらのスタイルプロパティが2つだけのクラスstyle="overflow: hidden;text-overflow: Ellipsis;"

完全な例：

<h3 class="text-nowrap" style="overflow: hidden;text-overflow: Ellipsis;">

2
Martin Kearn

20％は提案であり、テーブルレイアウトはそれを無視します。テーブルセル内に適切な幅（または最大幅）でdivを配置し、そのdiv内にテキストを配置します。

0
user663031