javascript - 如何使缩写标签仅适用于省略的文本

Question

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

<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>

我在一个 div 中有一些数据，当它超过 div 长度时，其中的文本将被省略，并且应该使用 <abbr> 显示该特定元素的完整文本。 .但是现在<abbr>正在处理所有数据。我怎样才能让它只适用于省略的文本？我可以使用 javascript 或 jquery 实现吗？

Answer 1

正如我们在评论中讨论的那样，这里的问题是特异性。您在原始帖子目标中列出的 CSS <abbr>在整个文档中，您的目标是仅针对 <abbr>在 .ellip 的包装内找到.

解决方案是确保您的 CSS 足够具体:

.ellip {
    width: 300px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.ellip abbr {
  border-bottom: none;
  cursor: inherit;
  text-decoration: none;
}

<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>

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