1

次のデザインをHTML/CSSに実装しようと考えていました。

列のテキストオーバーフローに問題があります。現在、テーブルの列幅はパーセンテージ形式で指定されているため、画面サイズに応じて列幅が変化しますが、最小幅もあります。最初のテキスト列では、サイズが長いためにコンテンツが拡張され、2行目が生成されていることがわかります。テキストオーバーフローを使用してこの問題を回避するにはどうすればよいですか？または他の解決策はありますか？また、マウスホバーを実行すると、同じ行に一連のアイコンが表示されていることがわかります。このとき、アイコンの下のテキストは非表示になり、デザインに示されているように短くする必要があります。この問題の解決策を見つけるようにアドバイスしてもらえますか？私が試してみましたtext-overflow: ellipsis。しかし、画面の幅が変わると問題が発生します。列幅が可変であるため最小幅がないので、このフィールドのテキストを短くするにはどうすればよいですか？ホバーの場合も??

他に知りたいことがあれば教えてください。

4

3 に答える 3

2

テキストを複数の行に分割したくない場合は、white-space:nowrapルールを追加します。次に、max-widthセルに a を設定します。

アイコンの場合は、右側に配置しposition、テキストよりも高くします。含まれているセルにも位置を追加する必要があります。それらをテキストの上に表示し続けるために、背景色 (およびいくつかの左パディング) を追加しました。absolutez-indexrelative

編集: Mozilla の修正

position:relative;Mozilla はtd 要素を無視しているようです。それを修正するには、td コンテンツを別の div 内にラップし、このスタイルを適用する必要があります

.tables td {
    font-weight: 400;
    font-size: 13px;
    border-bottom: 1px solid #E1E1E1;
    line-height: 38px;
    text-align: right;
    white-space: nowrap;
    max-width: 200px; /* just an example */
}

.tables td > div {
    overflow: hidden;
    width:100%;
    position: relative;
}

.linkFunctions {
    display: none;
    padding-top: 14px;
    position: absolute;
    right: 0;
    z-index: 999;
    background-color: #FFF9DC;
    padding-left: 3px;
    width: 100%;
    max-width: 120px; /* just an example */
    text-overflow: ellipsis;
    overflow: hidden;
}
于 2012-09-15T10:26:35.037 に答える
0

それはまさにあなたが望むものではありませんが（省略記号に関して）、非常に近いものです。

<a>内側に<td>追加

td a{
    display:block;
    overflow:hidden;
    width:100%;
    white-space:nowrap;
}

<a>( s内のALL ではなく、それらをより簡単にターゲットにするために、それらにクラスを追加する必要がある場合があります<td>)。

そしてホバーについて。右に浮かせてdiv.linkFunctions、黄色の背景を追加すると、それに応じてテキストが切り取られたように見えます。

于 2012-09-15T10:25:18.457 に答える
0

これらはすべて、幅を設定する必要があるため、意図したとおりにテーブルが流動的になりません。これを使用してください：http://jsfiddle.net/maruxa1j/

これにより、幅<td>をパーセンテージとして自動的に設定し:after、オーバーフローしたサイズを自動的に設定できます<span>

于 2015-05-21T00:27:18.990 に答える