设置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…

吉林省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}}。在使用中,我们会发现,如果按原来的…

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

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

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

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

五个使Java变得更好的功能

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

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

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

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

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

html vue分页,Vue.js bootstrap前端实现分页和排序

写之前先抱怨几句。本来一心一意做.net开发的,渐渐地成了只做前端。最近项目基本都用java做后台,我们这些.net的就成了前端,不是用wpf做界面,就是用html写web页面。深知自己前端技术不足,以前虽说用asp.net前后台都做&…

计算机管理ap,如何设置AC功能管理无线AP

AC功能管理无线AP第一步、连接ap举例型号TL-ER6520G不同类型的AP供电方式可能有所差异,包括直流电源供电和网线供电(PoE供电)两种。如下[1] 直流电源供电使用自带的电源适配器给AP供电,要求AP安放位置必须有电源插座,优点是节省成本。按照拓扑…

代表机械 计算机技术的颜色,基于机器视觉识别的交通灯控制系统

1、引言机器视觉又称计算机视觉,是用计算机来实现人的视觉功能,也就是用机器代替人眼来做测量和判断。机器视觉技术包含光源照明技术、光成像技术、传感器技术、数字图像处理技术、机械工程技术、检测控制技术、模拟与数字视频技术、计算机技术、人机接口…

java开发者工具开源版_JArchitect对Java开源贡献者免费

java开发者工具开源版JArchitect是用于Java代码库的静态分析工具,它提供交互式GUI和HTML报告,用于查找代码中过于复杂或有问题的区域,执行分析以重构并比较随时间的变化。 在版本3中,添加了类似LINQ的查询语言,该工具使…

计算机上没有启动程序怎么办,Win7开机不加载启动项怎么办

现在的电脑为了受到更好的保护,往往在开机的时候就加载了一些启动项,如:杀毒软件,安全卫士等等。可有时候会发现,在Win7操作系统中,安装后发现不能开机加载启动项。在注册表中,在msconfig中&…

线程同步,线程不同步_重新同步多线程集成测试

线程同步,线程不同步我最近在Captain Debug的Blog上偶然发现了一篇文章“ 同步多线程集成测试 ”。 那篇文章强调了设计涉及异步运行业务逻辑的被测类的集成测试的问题。 给出了这个人为的示例(我删除了一些评论): public class ThreadWrapp…

无限滚动重置服务器,简单无限滚动的实现

在使用elementUI组件库的时候,用到了无限滚动这个功能。我没有看源码,直接在网上学习了下实现的思路,然后自己手动编码以下。在此总结下。假设页面上有一个盒子容器,容器内有一些子元素。容器的高度是固定的,有纵向滚动…

Fatjars,Thinwars以及为什么OpenLiberty很酷

法特哈斯 构建一个Fatjar(或Uberjar),其中包含将应用程序很好地打包在一起运行所需的一切,这意味着您可以: java -jar myapp.jar然后离开。 没有应用程序服务器。 没有类路径。 这种方法已经被诸如Springboot之类的微…

Spring Cloud Config Server简介

1.概述 在本教程中,我们将回顾Spring Cloud Config Server的基础知识。 我们将设置一个Config Server ,然后构建一个客户端应用程序 ,该客户端应用程序在启动时会消耗配置 ,然后刷新配置而不重新启动。 我们正在构建的应用程序与《…

朴素贝叶斯算法实现分类以及Matlab实现

开始 其实在学习机器学习的一些算法,最近也一直在看这方面的东西,并且尝试着使用Matlab进行一些算法的实现。这几天一直在看得就是贝叶斯算法实现一个分类问题。大概经过了一下这个过程: 看书→算法公式推演→网上查询资料→进一步理解→搜…

位操作基础篇之位操作全面总结

转载自 http://blog.csdn.net/morewindows/article/details/7354571 Title: 位操作基础篇之位操作全面总结 KeyWord: C/C 位操作 位操作技巧 判断奇偶 交换两数 变换符号 求绝对值 位操作压缩空间 筛素数 位操作趣味应用 位操作笔试面试 位操作篇共分为基础篇和提高…