40

text-overflow: ellipsis;次のように、中央のセルでレスポンシブなテーブル幅を実現しようとしています:

| Button 1 | A one-lined text that is too long and has to be... | Button 2 |

テーブル全体はwidth: 100%;、デバイスと同じ大きさにする必要があります。アプリケーションが多言語であるため、固定幅を設定することはできませんButton 1(ただし、可能である必要があります)。Button 2max-width

...固定幅を設定したときにのみ表示されます。JavaScript の助けを借りずに、中央のセルに「利用可能なスペースを使用する」ように指示するにはどうすればよいですか?

4

7 に答える 7

80

これは実際にはクリーンなソリューションではありませんが、JS を使用せず、テストしたすべてのブラウザーで動作します。

table-layout: fixed私の解決策は、セルの内容をとでテーブル内にラップすることwidth: 100%です。

デモを参照してください。

完全なソリューションは次のとおりです。

<table class="main-table">
    <tr>
        <td class="nowrap">Button 1</td>
        <td>
            <table class="fixed-table">
                <tr>
                    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus doloremque magni illo reprehenderit consequuntur quia dicta labore veniam distinctio quod iure vitae porro nesciunt. Minus ipsam facilis! Velit sapiente numquam.</td>
                </tr>
            </table>
        </td>
        <td class="nowrap">Button 2</td>
    </tr>
</table>


.main-table {
    width: 100%;
}

.fixed-table {
    /* magic */
    width: 100%;
    table-layout: fixed;

    /*not really necessary, removes extra white space */
    border-collapse: collapse;
    border-spacing: 0;
    border: 0;
}
.fixed-table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nowrap {
    /* used to keep buttons' text in a single line,
     * remove this class to allow natural line-breaking.
     */
    white-space: nowrap;
}

サイドボタンの意図がはっきりしないので、以前white-space: nowrapは同じ行に配置していました。ユースケースによっては、a を適用してmin-width、それらを自然に改行させることを好む場合があります。

于 2013-10-27T20:47:38.163 に答える
20

テーブルの幅を 100% に設定し、テーブルfixedレイアウトを指定します。

table {
    width: 100%;
    table-layout: fixed;
}

次に、省略記号が必要な表のセルに次のように設定します。

td:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

出来上がり！省略記号オーバーフローを使用したレスポンシブ テーブル!

デモ: http://jsfiddle.net/VyxES/

于 2013-10-27T20:47:54.867 に答える
2

何時間も頭をぶつけた後、うまくいく解決策はありませんでしたが、ついにそれを見つけました。

オーバーフローのベースに必要な要素には、最小/最大幅が必要です。最大幅は最小幅よりも小さくなります。次に、要素またはその子をオーバーフローできます。ここで、%、px、auto のいずれかを選択して設定できます。

複数のトリッキーな状況で試してみましたが、すべてで機能します。

私の例でフィドルを投稿しようとしますが、これはあなたの助けになるはずです。

/* Apply on base element for proper overflow */
max-width: 1px;
min-width: 10000px;

/* Apply on self or child, according to need */
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
于 2015-03-25T19:24:28.623 に答える
1

どうぞ

<div class="container">
  <div>
    Button 1
  </div>
  <div class="fill">
    <div class="lockText">
      A one-lined text that is too long and has to be...
    </div>
  </div>
  <div>
    Button 2
  </div>
</div>

秘訣は、最初に残りのスペースを占有するセルを使用してテーブル レイアウトを設定することです (css テーブル、気をつけてください!)。

.container {
  display: table;
  width: 100%;
}

.container > div {
  display: table-cell;
  white-space: nowrap;
  position : relative;
  width : auto;

  /*make it easier to see what's going on*/
  padding : 2px;
  border : 1px solid gray;
}

.container > .fill {
  width : 100%;
}

次に、それ自体を制限するテキストを追加します。

.lockText {
  position : absolute;
  left : 0;
  right : 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
于 2016-11-10T01:26:51.160 に答える
0

[更新] 申し訳ありませんが、「そのように」動作しないようです: http://jsfiddle.net/kQKfc/1/

ただし、特定の状況ではうまくいくので、ここに残しておきます。
[/アップデート]

プロジェクトにこの CSS があるので、試してみてください。

.nowr
{
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
于 2013-02-12T06:56:14.570 に答える