Question

我有一个附加到跨度的css工具提示，如下所示：

<span class="mytooltip" data-mytooltip="Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. ">
    Has Tooltip
</span>

CSS简而言之：

.mytooltip {
  display: inline-block;
  position: relative; 
}
.mytooltip:hover:after {
  content: attr(data-mytooltip);
  display: block;
  margin-top: 0.7rem;
  margin-left: -1rem;
  left: auto;
  bottom: auto;
  padding: .3rem 1rem;
  position: absolute;
  z-index: 98;
  width: 400px; 
}

.mytooltip:hover:after{} width: 400px和 max-width: 400px; white-space: nowrap; 按预期工作。后者没有多大意义，因为尽管伪元素具有正确的宽度，但是当文本长度超过400px时，文本会浮动。有没有办法在伪元素上使用max-width并将文本包含在里面？

我非常感谢你的建议。

Answer 1

最后，我只能建议手动包装工具提示文本

＆＃13;

.mytooltip {
  display: inline-block;
  position: relative; 
  margin:15px;
  border: 1px solid red;
  overflow:visible;
}

.mytooltip:hover:after {
  content: attr(data-mytooltip);
  display: table-cell;
  margin-top: 0.7rem;
  margin-left: -1rem;
  left: auto;
  bottom: auto;
  padding: .3rem 1rem;
  position: absolute;
  z-index: 98;
  max-width: 400px; 
  white-space:pre;
  border: 1px solid #000;
  overflow:hidden;
}

＆＃13;

<span class="mytooltip" data-mytooltip="Text here. Text here. &#xa;Text here. Text here. Text here. &#xa;Text here. Text here. Text here. Text here. ">
    Has Tooltip
</span>

＆＃13;

伪类的最大宽度？

1 个答案: