html - 別のスパン幅に一致するようにスパン タグを制限する

Question

別のスパンと一致しないスパンからのオーバーフローを排除しようとしています。

これは私が扱っているものです。http://jsfiddle.net/D2WPW/12/

したがって、はの幅.graph spanと一致しません。.text span私overflow: hidden;はそのトリックを行うだろうと思った。そうではないと思います。私はこれについて間違った方法で進んでいますか？

洞察と助けをいただければ幸いです。ありがとうございました！

Answer 1

span タグは、必要なだけスペースを占有します。よく見ると.graph、幅を明示的に 116px に設定するインライン スタイルでキャンバス要素を挿入しています。

.textおそらく代わりに、キャンバス要素の幅を動的にして、隣接するスパンの幅と等しく設定する必要があります。

Answer 2

要素は要素.text内に.graphないため、overflow: hiddenon.graphが clipする必要はありません.text。

あなたがすべきことは、グラフとテキストの両方を含む要素overflow: hiddenと同様に静的な幅を設定することです： http://jsfiddle.net/D2WPW/26/text-align: justify

またwhite-space: nowrap、長すぎるテキストが次の行に折り返されないようにすることもできます。