设置html文字居中自动换行,CSS怎么设置文字自动换行?

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

75d137abbf2e0d794e3f5a6b25f8cdb5.png

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

示例:

html代码:

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

数字和英文字符:

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

强制换行后

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

css代码:.demo .wrap {

table-layout: fixed;

word-wrap: break-all;

word-break: normal;

overflow: hidden;

}

效果图:

0e6017350bc227109c3795690ff13f3e.png

说明:

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

b15e8f1f11231eb5f19d4f65eac0d0b2.png

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

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

2778dc948e6b3ad4c58ce3ba92aa35c6.png

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/348891.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

html霓虹灯效果图,HTML5 SVG+CSS3霓虹灯文字边框动画特效

【实例简介】【实例截图】【核心代码】使用SVG CSS实现动态霓虹灯文字效果#svgBox{[/b] width:100%;margin:100px auto;}.text{font-size: 64px;font-weight: bold;text-transform: uppercase;fill: none;stroke-width: 2px;stroke-dasharray: 90 310;animation: stroke 6s inf…

动态生成的html元素无法调用js函数,如何确保动态生成的div在js函数被调用之前被加载到DOM中?...

$("#submitB").click(function() {$.post("/previewproposal", $("#proposal-form").serialize(), function(data){$.colorbox({html:data});}, "html");});呈现的HTML是这样的:$(document).ready(function(){function plo…

lambdas for_Java 8 Lambdas –缺少脱离Java的链接

lambdas for我学习了函数式编程,但是后来我决定我更喜欢命令式编程,于是我转回去。 —没人 从命令式编程过渡到函数式编程是当今非常普遍的事情。 互联网上的博客文章充斥着关于它的证词。 我读过的所有内容以及与我交谈过的每个人(包括我自…

吉林省2021高考成绩排名查询,2021年吉林高考成绩排名查询系统,吉林高考位次排名表...

最近好多家长和考生留言,希望知道:吉林高考位次是什么?吉林高考位次与名次的区别?如何根据位次选大学?2020年吉林高考位次就是指考生高考成绩在全省同类考生中的位置。高考位次主要分为三大类:省市位次、区…

Picocli 2.0:类固醇上的Groovy脚本

Picocli 2.0增加了对其他JVM语言(尤其是Groovy)的支持。 当Groovy语言具有CliBuilder类的内置CLI支持时,为什么要使用picocli? 您可能会喜欢picocli的使用帮助,默认情况下会显示ANSI 颜色和样式 。 您可能喜欢的另一个…

angular字符串转成html,详解angular如何调用HTML字符串的方法

详解angular如何调用HTML字符串的方法前面的文章我们介绍过angular6.0的数据绑定,也就是前面页面如何调用后台的数据,我们接触到了调用普通数据——如:调用产品详情{{post.content}}。在使用中,我们会发现,如果按原来的…

西南交大计算机几个专业,西南交通大学计算机科学与技术专业

西南交通大学计算机科学与技术专业计算机科学与技术专业解读计算机科学与技术专业我校早在60年代初就创办了计算机技术专业,是全国较早设立该专业的高等学校之一。1978年由中科院院士曹建猷教授等主持恢复开办计算机科学及应用专业,1981年在国内首批获得…

模拟耗时操作_在集成测试中模拟耗时的动作

模拟耗时操作最近在我的一个项目中,我遇到一种情况,需要为该应用程序创建集成测试。 这不是很奇怪,不是吗? 有趣的是,应用程序的逻辑涉及一些并发问题,并且其中一个组件必须连接到外部服务,这将…

日志消息是可执行代码和注释

尽管在一个人的代码中应添加多少注释之间存在意见分歧,但我认为可以肯定地说,大多数开发人员都同意以下代码段中的注释是多余的: // increment the total total;在该示例中,代码很简单,并且实际上是不言自明的&#x…

代做html网页多少钱,代做排名网站有吗,做排名帮你实现财富自由

影响关键词排名的因素有哪些:1、影响搜索排序的因素前一段,我们在百度搜索排序规则中,实际上已经讨论过这个话题,其中核心的因素主要包括如下内容:① 网站主体与主题的权威度。② 页面内容的专业性以及多样化。③ 网站…

html flash层级,解决FLASH遮住其他层元素问题

刚做了个幻灯片广告,产品人员需要在第一个位置放flash,然后其他的都是图片,但是幻灯片切换到第一张的时候,圆圈tab元素不见了,只有在谷歌浏览器下面正常,用firebug看是被flash盖住了,&#xff0…

电脑没有使用计算机进入睡眠状态,电脑打不开,屏上显示:无视频输入,进入睡眠模式。怎么处理...

1、电脑能正常打开电源,并进行coms自检,但就是不能启动操作系统。光标在黑屏上闪烁,有提示:“Press any key to restar computer.”1)我碰到的这种情况解之道是检查软驱中是否有软盘。为什么要这样做呢,因为很多人的机…

prng伪随机数生成器_Java伪随机数生成器(PRNG)中的弱点

prng伪随机数生成器这将是Kai Michaelis,JrgSchwenk和我撰写的论文的总结,该论文在RSA Conference 2013的密码学家会议上发表 。 你可以得到我的演讲的幻灯片在这里和我们的全文在这里 。 我们对PRNG(主要是SecureRandom)附带的常…

时钟在微型计算机中作用,微型计算机系统中的实时时钟

实时时钟(RTC)是一种IC,可以跟踪当前时间。微处理器通常可以通过串行接口读取此信息,以方便软件执行与时间有关的功能。RTC专为超低功耗而设计,因为它们通常在主系统断电时仍可继续运行。这样一来,他们就可以根据绝对时间基准(通常…

五个使Java变得更好的功能

我偶然发现了Brian Goetz 提出的有关Java数据类的建议 ,立即意识到我也对如何使Java更好地成为一种语言有一些想法。 我实际上有很多,但这只是五个最重要的列表。 专制(2006),迈克贾奇(Mike Judge&#xf…

nit计算机应用基础是考试大纲,NIT考试大纲--计算机应用基础.doc

NIT考试大纲--计算机应用基础.doc全国计算机应用技术证书考试大纲【 HYPERLINK "javascript:doPrint()" 打印】【字体: HYPERLINK "javascript:doZoom(16)" 大 HYPERLINK "javascript:doZoom(14)" 中 HYPERLINK "javascript:doZ…

html选中列表整列变色,excel选中行变色完整代码和动画效果

内容提要:文章介绍excel选中行变色的效果以及实现选中行变色的VBA代码。在excel中如果行数过多,经常核对数据的准确性,容易错行跳行,所以才有本文的小技巧:excel选中行变色。当我们在excel工作表中,鼠标随便…

java 递归改非递归_使用Java ThreadLocals的意外递归保护

java 递归改非递归对于那些使用第三方工具来尝试扩展它们而又不完全了解它们的人来说,这是一个小技巧。 假定以下情况: 您想扩展一个展示分层数据模型的库(假设您要扩展Apache Jackrabbit ) 该库在访问内容存储库的任何节点之前…

大连理工18秋计算机应用基础,大连理工大学网络教育本科计算机应用基础入学考试模拟题...

大连理工大学网络教育本科计算机应用基础入学考试模拟题一、单选题1. 世界上第一台电子数字计算机采用的电子器件是______。A.大规模集成电路 B.集成电路C.晶体管 D.电子管2. 将计算机分为巨型机、大中型机、小型机、微型机、工作站等五类的分类标准是______。A.计算机处理数据…

构造函数还是静态工厂方法?

我相信Joshua Bloch在他的非常好的书“ Effective Java”中首先说了它:与构造函数相比,静态工厂方法是实例化对象的首选方法。 我不同意。 不仅因为我相信静态方法是纯粹的邪恶,而且主要是因为在这种特殊情况下,它们伪装成好的方法…