如何解决css英文不自动换行的问题

来源:网络整理作者: 发布时间:2020-12-16 17:14

css英文不自动换行的解决办法：首先创建一个HTML示例文件；然后通过p标签定义一个段落；最后使用“word-wrap: break-...

因为文字的容器p的宽度为400px，所有它的内容会在到达400px时自动换行，但该行末端有个很长的英文单词，它并不会把单词挪到下一行在显示，而是在本行把单词截断，一部分保持在行尾显示，另一部分换到下一行显示，这样不是很利于英文的阅读。

css英文不自动换行怎么办？

word-wrap: break-word; 设置文字的强制自动换行，但只对英文起作用，以单词作为换行依据。

文字与上面一致，但区别在于它会把整个单词看成一个整体，如果该行末端宽度不够整个单词显示，它就会自动把整个单词放到下一行显示，而不会把单词截断掉。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> p { width:9em; border:1px solid #000000; } p.test1 { word-wrap:break-word; } p.test2 { word-break:break-all; } </style> </head> <body> <p> This paragraph text. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </p> <p class="test1"> This paragraph text. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </p> <p class="test2"> This paragraph text. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </p> </body> </html>

效果图：

本教程操作环境：windows7系统、css3版，该方法适用于所有品牌电脑。

在CSS中，可以使用word-wrap: break-word;或word-break:break-all;来让英文强制换行。

word-break: break-all; 设置文字的强制自动换行，但只对英文起作用，以字母作为换行依据。

示例：

如何解决css英文不自动换行的问题

css英文不自动换行的解决办法：首先创建一个HTML示例文件；然后通过p标签定义一个段落；最后使用“word-wrap: break-word;”或“word-break:break-all;”来让英文强制换行即可。

相关热词： CSS 解决

本站内容来源于网络，如有侵权请与我们联系，我们会及时删除，我们深感抱歉！
注：本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规！

本文地址: https://v30.fanwenzhu.com/jiaob/cssm/4488.shtml

上一篇：css怎么把横着的字竖起来

下一篇：css3怎么实现字体倒影

你可以根据自己的网站需求设	/lili这里是列表内容/lili这里是
将这个文件给引入进去引入的	解决layUI导出到Excel时身份证号
html如何提高页面的加载速度	如何在html页面中实现查找功能
如何查看html文件的代码？	Canvas跨域的解决方案介绍
小程序学习之如何获取地理定	css超链接的底色如何设置
jsp页面如何加入css样式	HTML5 canvas中如何绘制图像
如何使用HTML5 canvas实现图像的	如何使用HTML5实现多个元素的拖
如何使用HTML5实现拖放单个元素	html中的特殊字符如何源码输出