質問: HTML5及びCSS3で作成したテーブルレイアウトにサーバーサイドからデータを流し込んでいるのですが、セルにダブルコーテーションなど、全角半角関わらず記号のみが指定した幅より長く入力された場合にレイアウトが崩れてしまいます。 cssにて、bodyに対しword-break:break-all;を記述したのですが、IE(11を含む)及びWebkit系では解決に至っておりません。 また、記号は記号でも「+」や「*」などレイアウトが崩れず改行されるものもあれば、「/」や、両方の「?」などは改行されません。 どなたか解決策をご存知でしたらご教授いただけますと幸いです。 よろしくお願い致します。
回答: まずテーブルとセルの横幅は固定されてますでしょうか? 固定されていない場合は改行されずにセルの横幅が可変します。 次に、word-break:break-all;はbodyではなく、thやtdなど、改行させたい場所に指定するとよいです。 bodyでは継承元として遠すぎます。 またtableにCSSでtable-layout:fixed;を追加します。 これはテーブルを固定レイアウトにするものです。 1)tableとth,tdの横幅を指定 2)tableにCSSでtable-layout:fixed; 3)th,td等の改行したい要素にword-break:break-all; これを試してみてください。