1

私はこのようなものが必要です

------------------------------
| Some text | fixed-teeeeext |
------------------------------

-----------------------------------
| Some long text | fixed-teeeeext |
------------------------------------

-----------------------------------------
| Some very long te... | fixed-teeeeext |
-----------------------------------------
|<-         a        ->|<-     b      ->|
|<-                 c                 ->|

これはすべて、1行のテキスト用です。右の列（b）は固定幅で、ブロック全体（c）は最大幅です。左の列（a）は最小限にする必要がありますが、cbに十分なスペースがない場合は、省略記号を使用する必要があります。

昔ながらのテーブルとさまざまなCSS2列レイアウトを試してみましたが、行き詰まりました。

アップデート

これはFFでは機能しますが、IE9では機能しません。

<table style="font-family: sans-serif;">
  <tr>
    <td style="max-width: 307px; 
               overflow: hidden; 
               text-overflow: ellipsis; 
               white-space: nowrap; 
               display:block; 
               font-weight: bold;">Lorem ipsum dolor sit amet, consectetur </td>
    <td style="width: 123px; color: #545556; font-size: 15px;">ST.2012.10.17.006</td>
  </tr>
</table>

アップデートII

ここですべての調査結果を統合しました：http：//frightanic.com/web-authoring/ellipsis-in-table-columns/

4

2 に答える 2

2

古いテーブル構造を試してください：2つのセルを持つ1つの行、固定幅の2番目のセル。最初のセルには、次のCSSを追加します。

.longTd {
border: 1px solid black;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display:block;
}

display:blockここで重要なコードです。

テーブル構造の代わりにIE9互換性のために編集し、インラインブロックDiv要素を使用します。

.longDiv{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
display:inline-block;
max-width:200px;
}
.shortDiv{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
display:inline-block;
width:100px;
}

次に、HTML：

<div class="longDiv">
Lorem ipsum dolor sit amet, consectetur blah di blah
</div>
<div class="shortDiv">
Not much text here
</div>

インラインブロックは、両方のDivを同じ行に保持します。

于 2012-10-18T21:04:38.413 に答える
0

これは省略記号を追加するために機能し、省略記号をサポートしていないブラウザでは正常に機能が低下します。

.truncate {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
于 2012-10-18T20:56:53.023 に答える