1

固定幅のコンテンツを含むテーブルがあります。これは常に適合するとは限りません。テキストを固定幅に切り捨て、省略記号を追加したいと思います。テキストにカーソルを合わせると、全文が表示されるはずです。これは正常に機能しますが、現在表示されているテキストがその右側のテキストを覆っています。どうすればこれを防ぐことができますか?

これは私がこれまでに得たものです。

.truncate {
  max-width: 5em;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.truncate:hover {
  overflow: visible
}

jsフィドル

4

2 に答える 2

5

ホバーしたときにテキストが読めるようにアプローチを改善する方法を次に示します。

更新された HTML:

<table>
    <tr>
        <td><span><a class="truncate">faksjfaklsjf asjf lajslfk jasklfj alkjsfkl jalskfjla</a></span>
        </td>
        <td>
            <span>
            <a class="truncate">
                faskfjalskfj alkfj laksj flkajfl kajfl ajfkl ajsl
            </a>
            </span>
        </td>
    </tr>
</table>

が でどのよう<a>にラップされているかを確認してください<span>。

そして、更新された CSS は次のとおりです。

td {
    width: 5em;
} 
span {
    height:1.2em;
    position:relative;
    display: inline-block;
}
.truncate {
     max-width: 5em;
     overflow: hidden;
     display: inline-block;
     text-overflow: ellipsis;
     white-space: nowrap;

 }
 .truncate:hover {
    position:absolute;
    max-width: none;
    background:#fff;     
    z-index:100;
    overflow:visible;    
 }

spanは相対的に配置されるため、その中の絶対アイテムは新しいレイヤーに表示され、実質的にスペースを取りません (overflow:hidden削除されても他のテキストは移動しません)。

a.truncateホバー時に絶対配置になり、最大幅の制限が緩和されます。background:#fffする必要があります

デモ

于 2013-10-22T10:24:05.287 に答える
1

タグに title 属性を追加し、ホバー CSS を削除します。

HTML

<table>
    <tr>
        <td>
            <a class="truncate" title="faksjfaklsjf asjf lajslfk jasklfj alkjsfkl jalskfjla">
                faksjfaklsjf asjf lajslfk jasklfj alkjsfkl jalskfjla
            </a>
        </td>
        <td>
            <a class="truncate" title="faskfjalskfj alkfj laksj flkajfl kajfl ajfkl ajsl">
                faskfjalskfj alkfj laksj flkajfl kajfl ajfkl ajsl
            </a>
        </td>
    </tr>
</table>

CSS

td {
    width: 5em;
} 
.truncate {
     max-width: 5em;
     overflow: hidden;
     display: inline-block;
     text-overflow: ellipsis;
     white-space: nowrap;
 }

ここでフィドル

于 2013-10-22T09:55:04.143 に答える