收缩span标记以匹配另一个跨度宽度

Question

我试图消除任何与其他人不匹配的溢出。

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

因此.graph span与.text span的宽度不匹配。我以为overflow: hidden;会做到这一点。我猜不会。我是以错误的方式解决这个问题吗？

非常感谢任何见解和帮助。谢谢！

Answer 1

span标记将占用尽可能多的空间。如果你仔细观察，你会在.graph中插入一个canvas元素，其内联样式明确地将宽度设置为116px。

也许您应该使canvas元素的宽度动态化并将其设置为等于相邻.text范围的宽度。

Answer 2

.text元素不在.graph元素中，因此overflow: hidden上的.graph没有理由剪切.text。

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

您可能还希望white-space: nowrap阻止过长的文字换行到下一行。