Question

＆＃13;

.ellip {
    width: 300px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
abbr[title] {
  border-bottom: none !important;
  cursor: inherit !important;
  text-decoration: none !important;
}

＆＃13;

<div class="ellip">
<input type='checkbox' value='"+a.a+"' name='radio' title='"+a.b+"' class='"+a.c+"'><span id='"+a.b+"'><abbr title='"+a.a+"'>"+a.a+"</abbr></span><i class='fa fa-pencil'  aria-hidden='true' ></i>
</div>

＆＃13;

我在div中有一些数据，当它超过div长度时，其中的文本将被省略，并且应使用<abbr>显示该特定项目的完整文本。但现在<abbr>正在为所有数据工作。如何使其仅适用于省略号文本？我可以使用javascript或jquery来实现吗？

Answer 1

正如我们在评论中所讨论的，这里的问题是特异性。您在原始帖子中列出的CSS会在整个文档中定位<abbr>，其目标是仅定位<abbr>包装中的.ellip。

然后，解决方案是确保您的CSS足够具体：

＆＃13;

.ellip {
    width: 300px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.ellip abbr {
  border-bottom: none;
  cursor: inherit;
  text-decoration: none;
}

＆＃13;

<div class="ellip">
  <abbr title="This should not be underlined in Chrome">This should not be underlined in Chrome</abbr>
</div>

<abbr title="This should be underlined in Chrome">This should be underlined in Chrome</abbr>

＆＃13;

同样，您将在不同的浏览器中看到不同的结果，具体取决于浏览器选择如何设置<abbr>元素的样式。有些（如Safari）根本不提供样式，而其他人则选择应用smallcaps或各种下划线效果。

如何使abbr标签仅适用于省略号文本

1 个答案: