html怎样让文字自动换行,CSS怎么设置文字自动换行？-程序员宅基地

技术标签： html怎样让文字自动换行

CSS怎么设置文字自动换行？下面本篇文章就给大家介绍css设置文字(特别是连续的数字和英文)自动换行的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

关于换行问题，正常字符的换行是比较合理的，但连续的数字和英文字符常常将容器撑大，而不换行，就挺让人头疼了，这就需要进行强制自动换行了。

示例：

html代码：

正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal，当定义的宽度之后就会自动换行

数字和英文字符:

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

强制换行后

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

css代码：.demo .wrap {

table-layout: fixed;

word-wrap: break-all;

word-break: normal;

overflow: hidden;

}

效果图：

说明：

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

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

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

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

本文链接：https://blog.csdn.net/weixin_33085941/article/details/117713113

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Android Studio一个连接SQLite数据库的登录注册实现_android sqllite tomcat-程序员宅基地

文章浏览阅读4.7w次，点赞129次，收藏751次。声明：AS版本为：3.4；JDK版本为：1.81、先看一下项目目录：2、新建一个AS项目，创建如上图所示的目录结构，然后添加内容：（1）修改添加布局文件：activity_main.xml：<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayout xm..._android sqllite tomcat

mysql的扩容_MySQL的InnoDB的扩容-程序员宅基地

文章浏览阅读189次。innodb_data_home_dir这是InnoDB表的目录共用设置。如果没有在 my.cnf 进行设置，InnoDB 将使用MySQL的 datadir 目录为缺省目录。如果设定一个空字串,可以在 innodb_data_file_path 中设定绝对路径。innodb_data_file_path单独指定数据文件的路径与大小。数据文件的完整路径由 innodb_data_home_dir ..._mysql 系统表空间扩容 nnodb_force_frecovery

Xwiki使用说明书_xwiki使用教程-程序员宅基地

文章浏览阅读7.1k次。XWIKI使用说明书 2015-05-05 目录1 用户管理... 21.1 添加用户... 21.2 用户分组... 31.3 用户权限... 41.3.1 wiki管理权限... 41.3.2 空间权限_xwiki使用教程

Qt删除,复制当前路径下所有文件(夹)_qfile::remove文件夹-程序员宅基地

文章浏览阅读1.2k次，点赞4次，收藏6次。Qt删除路径下所有文件,复制路径下所有文件方法的封装.//删除当前文件路径下的文件bool KQProductHelper::RemoveFiles(QString sfilePath){ if(sfilePath.isEmpty()) return false; QFileInfo fileinfo(sfilePath); QString bas..._qfile::remove文件夹

真·simulink车辆仿真基础教程-这玩意真不难：仿真基础知识（1）_真simulink车辆仿真基础教程-程序员宅基地

文章浏览阅读1.1k次，点赞25次，收藏29次。汽车动力性概括来讲，是指汽车在良好路面上直线行驶时，由汽车受到的纵向外力决定、所能达到的平均行驶速度。通常用最高车速、爬坡能力、加速时间表征。_真simulink车辆仿真基础教程

Swagger2总结（Swagger2引入、Spring-Swagger2整合、Swagger2常用注解与插件）-程序员宅基地

文章浏览阅读2.4k次，点赞2次，收藏12次。Swagger2引入、Spring-Swagger2整合、Swagger2常用注解与插件_swagger2

随便推点

vue el-input表单验证禁止输入空格_element表单空格校验-程序员宅基地

文章浏览阅读1w次，点赞6次，收藏7次。element ui 中自带的表单必填项校验输入空格时，依然能逃过验证（required: true还是可以通过），需要再在v-model 加上.trim来禁止输入空格字符。加上之后则不能输入空格。..._element表单空格校验

PYTHON常用库简介_python常用库介绍-程序员宅基地

文章浏览阅读8.3k次，点赞6次，收藏80次。Python科学计算基础库：Numpy，Pandas，Scipy，Matplotlib1.NumPy支持大量的维度数组与矩阵运算，此外也针对数组运算提供大量的数学函数库,线性代数，傅里叶变换和随机数功能底层使用C语言编写，内部解除了GIL（全局解释器锁），其对数组的操作速度不受Python解释器的限制，效率远高于纯Python代码。2.PandasPandas是一个强大的基于Numpy分析结构化数据的工具集；Pandas 可以从各种文件格式比如 CSV、JSON、SQL、Micros_python常用库介绍