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> オンラインランニング
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
