html - 限制跨度标记以匹配另一个跨度宽度

Question

我正在尝试消除与另一个不匹配的跨度的任何溢出。

这就是我正在处理的事情。http://jsfiddle.net/D2WPW/12/

所以 与的宽度.graph span不匹配。.text span我想overflow: hidden;会做的伎俩。我猜不会。我会以错误的方式解决这个问题吗？

任何见解和帮助将不胜感激。谢谢！

Answer 1

跨度标签将根据需要占用尽可能多的空间。如果您仔细观察，您将插入一个.graph带有内联样式的画布元素，该样式明确将宽度设置为 116 像素。

也许相反，您应该使画布元素的宽度动态化，并将其设置为等于相邻.text跨度的宽度。

Answer 2

.text元素不在元素内部，.graph所以没有理由overflow: hiddenon.graph应该 clip .text。

您应该做的是设置静态宽度以及包含图形和文本的元素：overflow: hiddenhttp : //jsfiddle.net/D2WPW/26/text-align: justify

您可能还希望white-space: nowrap防止太长的文本换行到下一行。