html - 使用 css 使溢出的文本可读

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