Home >Web Front-end >HTML Tutorial >css 实现长英文或链接自动换行_html/css_WEB-ITnose
css 实现长英文或链接自动换行_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:25:491217browse
在网页布局中，经常遇到长英文或链接在div等盒子里排成一排显示不会自动随盒子宽度限制而自动换行。该如何解决这个问题呢？本文章通过实例向大家讲解css长英文或链接如何自动换行。
解决办法:
使用CSS属性 word-wrap:break-word;即可解决。使用break-word时，是将强制换行。
break-word兼容各版本IE浏览器，兼容谷歌浏览器。
实例:
<!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> 在线运行
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：深入理解CSS网页布局-理论篇_html/css_WEB-ITnoseNext article：那些 CSS 背景图的技巧_html/css_WEB-ITnose