Question

我有一个固定宽度内容的表。这并不总是合适的。我想将文本截断为固定宽度并附加省略号。悬停文本时应该可以看到全文。这工作正常，但现在可见的文本覆盖了右侧的文本。我怎么能阻止这个？

这是我到目前为止所得到的。

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

.truncate:hover {
  overflow: visible
}

jsFiddle

Answer 1

以下是如何改进您的方法，以便在悬停时可读取文本。

更新了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

Demo

Answer 2

为标记添加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;
 }

小提琴here

使用css使溢出的文本可读

2 个答案: