質問: 今、HTMLとCSSを用いて、<オプション>の炭酸シャンプーと[300円(税込) 頭皮を直接刺激してあげることで、根本から従来のハリとツヤを取り戻せます。 ]の行の部分の作成をしているのですが、下の写真のように、改行できず、はみ出してしまいます。 Websiteで調べ、word-wrap: break-word; white-space: normal; を用いたり、 .table1 op-td{ のように表の一部分のみに効果をもたらすように書いたのですが、思うように機能してくれません。 大変恐縮ですが、どなたか分かる方ご教授していただけないでしょうか? **HTML** < オプション > 炭酸シャンプー: 300円(税込) 頭皮を直接刺激してあげることで、根本から従来のハリとツヤを取り戻せます。 **CSS** .op-tit{ font-size:26px; color:#a40000; padding-bottom:14px; padding-top: 14px; font-family: "A-OTF フォーク Pro", "Arial", "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; text-align:left; } .op-th{ font-size:19px; color:#0e0e0e; font-family: "A-OTF フォーク Pro", "Arial", "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; white-space:nowrap; width:7em; text-align:right; } .table1 op-td{ width:3px; word-wrap: break-word; white-space: normal; } .op-td{ font-size:18px; color:#313131; line-height:26px; white-space:nowrap; text-align:left; } ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/d2398fb83be631fa98d919bec5bc5a42.png)
回答: op-td{ ... white-space: nowrap; } white-space: normal では? 参考情報 * white-space・・・ソース中のスペース・タブ・改行の表示の仕方を指定する chrome の 開発ツールを使うと、html の要素にどんな css が指定されているかを確認したり、 その場で css 指定を変更して表示がどう変わるかを試すことができます。 !イメージ説明