php控制文本换行,css如何控制文字换行方式？（代码示例）

css如何控制文字换行方式？本篇文章就给大家介绍css设置文字(特别是连续的数字和英文)强制换行、强制不换行且隐藏超出部分的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

一、css设置文字的强制换行

关于换行问题，正常字符的换行是比较合理的，但连续的数字和英文字符常常将容器撑大，而不换行，就挺让人头疼了，这就需要进行强制换行。php中文网相关学习推荐：CSS教程！

下面我们通过简单的代码示例来介绍css实现强制换行的方法。

html代码：

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

数字和英文字符:

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

强制换行后

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

css代码：.demo .wrap {

table-layout: fixed;

word-wrap: break-all;

word-break: normal;

overflow: hidden;

}

效果图：

说明：

white-space: normal;设置文字的自动换行；

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

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

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

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

white-space: pre-wrap; 设置文字的强制换行，但只对中文起作用。

二、css设置文字的强制不换行

下面我们通过简单的代码示例给大家介绍css设置文字的强制不换行，且超出部分隐藏的方法

html代码：

This is a long Wordddddddddddddddddddddddddddddddddddddddd!

css代码：.demo .wrap {

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

效果图：

说明：

white-space:nowrap; 设置文字禁止换行(强制不换行)。

overflow:hidden;设置把多余内容隐藏起来，不让多出来的内容撑破容器。

text-overflow:ellipsis; 设置多出的内容以省略号…来表达。注：text-overflow:ellipsis; 属性主要是用于IE等浏览器中，Opera浏览器要考虑兼容性，使用-o-text-overflow:ellipsis;才可以实现效果；而在Firefox浏览器中就没有这个功能了，只能把多出的内容隐藏起来。

总结：以上就是本篇文章所介绍的css设置文字换行的两种方式，分别为：强制转换和强制不转换，大家可以自己试试，加深理解，希望能对大家的学习有所帮助。

进一步学习：

php控制文本换行,css如何控制文字换行方式？（代码示例）相关推荐

html怎么控制字数换行,css 如何控制span 强制换行
css 如何控制span 强制换行以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! css 如何控制span 强制换行 & ...
html给文本换行,CSS长文本换行
在网页设计中,我们常常会发现文本在容器中的换行和我们理想的不一样,这导致不对齐溢出等不美观现象.那么我们怎么来控制长文本的换行呢?用CSS即可完成. 一.DIV.P等块级元素的换行控制 1.当我们定义 ...
html 水平柱形图,CSS实现柱形图效果的代码示例
使命召唤:35%机器战争:40%CS:87%光环:45%半条命:23% 解释一下,ul里面的每一个li就代表我们要统计的内容,span为柱身,em为统计项的名字,strong为统计数值.我们可以添加一 ...
html计数器自动编号,css如何使用计数器给元素自动编号？css计数器的使用（代码示例）...
css如何使用计数器给元素自动编号?本篇文章就给大家介绍设置和使用css计数器的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 在之前的文章[css计数器(counter)是什 ...
文本字符分析python_Python实现字符串匹配算法代码示例
字符串匹配存在的问题 Python中在一个长字符串中查找子串是否存在可以用两种方法:一是str的find()函数,find()函数只返回子串匹配到的起始位置,若没有,则返回-1:二是re模块的find ...
ink css,CSS text-decoration-skip-ink属性用法及代码示例
text-decoration-skip-ink属性用于指定下划线和上划线穿过字符或字形时的呈现方式. 用法: text-decoration-skip-ink:auto | none 属性值: au ...
html样式zoom,CSS zoom属性用法及代码示例
CSS中的zoom属性用于scale-up或scale-down的内容.在其他一些浏览器不支持Internet Explorer之前,已为Internet Explorer实现了此属性. 用法: zo ...
css中left属性,CSS left属性用法及代码示例
CSS中的left属性用于指定定位元素的水平位置.它对未定位的元素没有影响. 注意: 如果position属性是绝对或固定的,则left属性指定元素左边与其包含块的左边之间的距离. 如果positio ...
在HTML中hr的默认值inset,CSS inset属性用法及代码示例
CSS中的inset属性用于定义物理偏移量,而不用于内联偏移量或逻辑块.此属性可以应用于任何writing-mode属性. 用法: inset:length|percentage|auto|inher ...

php控制文本换行,css如何控制文字换行方式？（代码示例）

php控制文本换行,css如何控制文字换行方式？（代码示例）相关推荐

最新文章

热门文章