ホームページ > 記事 > ウェブフロントエンド > 長い英語の自動行折り返しを実現するcssまたはlinks_html/css_WEB-ITnose
長い英語の自動行折り返しを実現するcssまたはlinks_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:25:491187ブラウズ
Web ページのレイアウトでは、div などのボックス内に長い英単語やリンクが連続して表示され、ボックスの幅制限に従って自動的に折り返されないことがよくあります。この問題を解決するにはどうすればよいでしょうか?この記事では、CSSで長い英語やリンクを自動で折り返す方法を例を挙げて説明します。
解決策:
これを解決するには、CSS 属性 word-wrap:break-word; を使用します。ブレークワードを使用すると強制的に改行されます。
break-word は、IE ブラウザおよび Google Chrome のすべてのバージョンと互換性があります。
例:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>码农教程-it编程入门网</title> <style> .box{ border:1px solid #00F; height:120px; width:200px;word-wrap:break-word} </style> </head> <body> <div class="box"> aabbfjdlkfldsjfldsjfldjfljdlafjldsjflkdjflkdsjfldfjdlj<br /> <a href="http://www.manongjc.com">http://sddsdsddddddddddddddddddddddddddddddddddddddddd.com</a></div> </body> </html> オンラインランニング
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。