html怎样让文字自动换行,CSS怎么设置文字自动换行?
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;设置文字的强制自动换行,但只对英文起作用,以单词作为换行依据。
文字与上面一致,但区别在于它会把整个单词看成一个整体,如果该行末端宽度不够整个单词显示,它就会自动把整个单词放到下一行显示,而不会把单词截断掉。
html怎样让文字自动换行,CSS怎么设置文字自动换行?相关推荐
- css字体阴影_css3如何添加文字阴影效果?text-shadow设置文字阴影效果
阴影效果是一个常见也很实用的效果,相信有些朋友在使用阴影效果来美观网页页面时,有时会有一些疑问,比如:字体文字阴影是怎样设置的等等.那么本章就给大家谈谈css3是如何设置字体文字阴影的.有一定的参考价 ...
- html文字阴影php中文网,css3如何添加文字阴影效果?text-shadow设置文字阴影效果...
阴影效果是一个常见也很实用的效果,相信有些朋友在使用阴影效果来美观网页页面时,有时会有一些疑问,比如:字体文字阴影是怎样设置的等等.那么本章就给大家谈谈css3是如何设置字体文字阴影的.有一定的参考价 ...
- PHP字体间距设置,CSS如何设置文字间距?
css文字与文字之间的间距怎么调整?相信有很多小伙伴都会有这样的疑问.本章就给大家介绍css设置文字间距的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 一.css word- ...
- html强制不换行标签,css如何设置文字强制不换行?
css可以使用white-space属性设置文字强制不换行,通常我们使用white-space:nowrap强制文本文字内容不换行,在对象内一行显示完所有文字内容. css可以使用white-spac ...
- html中一段文字行间距设置,CSS如何设置文字行间距?
CSS如何调节设置每行文字字体间距(行距),使得每行的文字一定的间距距离?下面本篇文章就来给大家介绍使用CSS设置文字行间距的方法,希望对大家有所帮助. 要想使得每行的文字一定的间距距离可以通过CSS ...
- css怎么将文字底下设置颜色,css如何设置文字颜色
css设置文字颜色的方法:1.在DIV标签内使用color颜色样式,代码为[ www.php.cn ]:2.在CSS选择器中使用color颜色样式CSS代码. 本教程操作环境:windows7系统.c ...
- css如何设置文字阴影?
text-shadow属性:在CSS3中可以用text-shadow属性给页面上的文字添加阴影效果,可以通过对text-shadow属性设置相关的属性值,来实现一些需要的字体阴影效果,减少了图片的使用 ...
- html 英文自动换行,CSS让英文单词的自动换行
在制作网页过程中,css样式编写中,可能会遇到文字换行的问题,其中英文换行可能会困扰着很多初学者,而今天我就这个问题进行相应的阐述,学过css的朋友应该都知道,控制文字是否换行可以直接使用css中的w ...
- css 输入框中文字水平居中,css水平居中,文字垂直居中
水平居中 定宽度+margin:top auto可以让一个块级别元素在外层居中 例如这样: 效果: 可以看到这个div已经居中了 但是我们里边的表格还没有居中,我们也可以给表格这样来一套,让他相对它的 ...
最新文章
- 查mac对应ip的不同系统命令
- JavaSE基础复习总结
- iOS网络编程之Socket
- 捣鼓了一个月的SharePoint
- iOS字符串常用用法
- jq封装接口ajax,jquery ajax方法封装及api文件设计的代码示例
- 一张图了解浏览器渲染页面的过程
- python selenium在编写过程中遇到的问题记录2
- 编译调试Apache HTTP Server
- java for 变量赋值_Java 如何引用变量赋值?
- seo清洗百万长尾词数据的策略
- 产品需求文档模板,不用找了(附“简”例)【转】
- Windows10安装Vmware12
- MTK6589平台——“长按powerkey重启”feature不工作问题的解决
- 昆仑固件涉密专用计算机,存储处理国家秘密的计算机信息系统按照涉密程序实行...
- linux下配置Tilera MDE4.1.8方法
- 日本东京市区坐车到成田机场
- JavaScript课堂笔记
- Java8 JVM运行时数据区概述 (极其详细长文)
- web前端面试题完美整理/涵盖html,CSS、JS、浏览器、Vue、React、移动web。