CSS：CSSでボックス内の英語文字列等を折り返しさせる | raining

テクノロジーカテゴリーの変更を依頼記事元:

raining.bear-life.com

5 usersがブックマークコメント

記事へのコメント1件

注目コメント
新着コメント

trox css 文字折り返し

2015/08/07 リンク

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

<iframe marginwidth="0" marginheight="0" src="https://b.hatena.ne.jp/entry.parts?url=http%3A%2F%2Fraining.bear-life.com%2Fcss%2Fcss%25E3%2581%25A7%25E3%2583%259C%25E3%2583%2583%25E3%2582%25AF%25E3%2582%25B9%25E5%2586%2585%25E3%2581%25AE%25E8%258B%25B1%25E8%25AA%259E%25E6%2596%2587%25E5%25AD%2597%25E5%2588%2597%25E7%25AD%2589%25E3%2582%2592%25E6%258A%2598%25E3%2582%258A%25E8%25BF%2594%25E3%2581%2597%25E3%2581%2595%25E3%2581%259B%25E3%2582%258B" scrolling="no" frameborder="0" height="230" width="500"><div class="hatena-bookmark-detail-info"><a href="http://raining.bear-life.com/css/css%E3%81%A7%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E5%86%85%E3%81%AE%E8%8B%B1%E8%AA%9E%E6%96%87%E5%AD%97%E5%88%97%E7%AD%89%E3%82%92%E6%8A%98%E3%82%8A%E8%BF%94%E3%81%97%E3%81%95%E3%81%9B%E3%82%8B">CSS：CSSでボックス内の英語文字列等を折り返しさせる | raining</a><a href="https://b.hatena.ne.jp/entry/raining.bear-life.com/css/css%E3%81%A7%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E5%86%85%E3%81%AE%E8%8B%B1%E8%AA%9E%E6%96%87%E5%AD%97%E5%88%97%E7%AD%89%E3%82%92%E6%8A%98%E3%82%8A%E8%BF%94%E3%81%97%E3%81%95%E3%81%9B%E3%82%8B">はてなブックマーク - CSS：CSSでボックス内の英語文字列等を折り返しさせる | raining</a></div></iframe>

プレビュー

規約違反を報告

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

CSS：CSSでボックス内の英語文字列等を折り返しさせる | raining

HTMLの「table」タグや「div」タグなど、ボックス内で長い英語文字列やURL等を入れるとボックスからはみ... HTMLの「table」タグや「div」タグなど、ボックス内で長い英語文字列やURL等を入れるとボックスからはみ出して表示されることがあります。ボックスに指定した幅で文字列を折り返しさせるために、CSSを使用し英語等の文字列をボックス内で改行させます。 CSSは「word-break」、「word-wrap」を使用し、文字列の改行の仕方を指定します。 ■ 「table」タグの場合「table」タグでは「word-wrap: break-word;」を使用するとボックス幅が伸びてしまうので、「word-break: break-all;」を使用して折り返しさせます。【CSS】 table { width: 300px; } table th { border: 1px solid #CCC; width: 50px; } table td { border: 1px solid #CC