css 实现长英文或链接自动换行_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:25:49
Original
1193 Leute haben es durchsucht

在网页布局中,经常遇到长英文或链接在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> 
Nach dem Login kopieren

在线运行

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage