您现在的位置是: 首页 » 网页代码 » css英文不换行怎么办
网页代码

css英文不换行怎么办

网站优化小编十一月 5, 2019 7人已围观

在div css布局中,遇到连续英文字母或连续数字在div、p、h2、h1等盒子里排成一排显示不会自动随盒子宽度限制而自动换行。下面我们来看一下使用css设置英文自动换行。

网站运营中栏目排名优化技巧

下面我来为大家介绍使用css样式简单实现DIV内放字母英文或数字自动换行。

当然中文字在DIV或任意盒子中均会自动换行不需要CSS样式实现,只有连续的字母或数字会出现不自动换行问题,所以需要CSS解决。

英文字母或数字在DIV不换行溢出DIV的问题效果如下:

<html><head><style type="text/css">.div1{border:1px solid red;height:60px;width:200px;}</style></head><body><div class="div1">absasdjhfsfcdsfjhfdsedjfsdjkjhhksjhfkjshkjsdjhfjkshdfjsdjcsd</div></body></html>

效果图:

网站运营中栏目排名优化技巧

使用word-wrap:break-word设置换行:

使用break-word时,是将强制换行。兼容各版本IE浏览器,兼容谷歌浏览器。

CSS自动换行实例代码与效果截图:

完整HTML+CSS代码

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>英文自动换行</title> <style> .div1{ border:1px solid #00F; height:120px; width:200px;word-wrap:break-word} </style> </head> <body> <div class="div1"> aabbfjdlkfldsjfldsjfldjfljdlafjldsjflkdjflkdsjfldfjdlj<br /> 138787843748927493274392749327493 </div> </body> </html>

效果图:

网站运营中栏目排名优化技巧

文章评论

    发表评论

    电子邮件地址不会被公开。

站点信息
  • 站点运行:202天
  • 网站程序:Wordpress
  • 主题模板:bvseo
  • 文章统计:2605 条
  • 文章评论:5 条
  • 微信公众号:扫描二维码,关注我们