1

我有一个固定宽度内容的表格。这并不总是合适的。我想将文本截断为固定宽度并附加省略号。悬停文本时应该可以看到全文。这很好用，只是现在可见的文本覆盖了它右边的文本。我怎样才能防止这种情况？

这就是我到目前为止所拥有的。

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

.truncate:hover {
  overflow: visible
}

jsFiddle

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

为您的标签添加一个标题属性并删除悬停 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 回答