javascript - CSS - 将右侧边距与自动换行的工具提示段落对齐

Question

有或没有设置宽度，我怎样才能使右边距与我的工具提示段落正确对齐？

Screenshot of my problem

How I'd like the tooltip to appear

在这个例子中，我将宽度设置为 190px，因此段落在“描述”处换行，这没问题，但它在右侧留下了很大的空隙。是否可以设置宽度但右手边距与文本对齐？我不确定如何在不设置宽度的情况下自动换行，但设置宽度后我看不到我的问题消失。

我已经尝试了好几天了，我想出的最好的解决方法是设置宽度并使用 text-align: justify 或 text- align: center 但我更愿意保持它向左对齐。

您可以在下面的我的 JSFiddle 中看到默认工具提示在 Leaflet 中是如何工作的。 Leaflet CSS 中没有为它们设置宽度并且 .leaflet-tooltip 部分包括 white-space: nowrap 所以它们不是为此而设计的，但对于我想添加描述的少数地方标记，信息或消息来源，让他们看起来最好。 Leaflet CSS 中还有:

.leaflet-tooltip {
position: absolute;
padding: 6px;
background-color: #fff;
border: 1px solid #fff;
border-radius: 3px;
color: #222;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

我在搜索时发现的与我类似的问题完全不同，以至于它们的答案不适用于我的代码或者太复杂以至于我无法理解。我尝试了许多不同的属性和值，但没有运气——也许我做错了什么。我不认为我仍然会为此挠头，所以请查看 JFiddle 并尝试一下，如果可以的话，希望能提供建议。谢谢

对不起，如果我用词不当!对这一切仍然很陌生。

JSFiddle 请点击右上角的“Irving”控制框以显示标记

Answer 1

因此，虽然工具提示本身不受 width 属性的限制，但包含的 p 元素是。

段落元素是一个 block 元素，这意味着它本质上是一个矩形，其内容根据应用的属性以不同的方式包裹在其中。

在这种情况下，段落被设置为固定的 190 像素，这意味着如果至少一行的字符加起来不等于 190 像素，它们将以不同的方式换行。

因此，您可以在以下选项中进行选择:

• 因为已经在评论中提出，将word-break属性更改为word-break: break-all

  <

• 将文本对齐方式更改为 text-align:justify

• 移除固定宽度并在段落元素上应用 display:inline 和 float:left，但内容的行数会产生不可预测的结果.

嗯，就是这样。为了定位段落元素，使用类 .leaflet-tooltip p。