css中字符换行的一些问题
-------我们在处理文章的内容的过程中由于文章内容混杂有中文、英文、数字等其他字符，而我们常见的英文和数字是无法在包裹元素中自动换行，这往往会导致元素被撑破，如下图所示：
css中word-break可以解决这个问题，写个测试页面来做个笔记
css代码：
body{font-size:14px;}
p{ border:solid 1px red;width:200px;}
html代码：
<body>
<p class="test">English中文中文中文中文中文中文Englis333hEnglishEnglishEnglish中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文 123ewewee
123EnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglish </p>
</body>
此时的运行效果如开题处所说，下面给p标签加点样式
css代码：
.test{ word-break:break-all;}
效果如下：
可以发现所有的文字不管是中文还是英文还是数字都可以在包裹的p标签的末尾位置自动强制转行，这会有一个问题，会把本来是一个组合的字符串拆分看影响效果，再看一个
css代码：
.test {word-break:hyphenate;}
效果如下：
此css将可能会撑破包裹元素的字符段在断字点进行提前换行
再看
css代码：
.test{ word-break:keep-all;}
效果如下：
在所有的字符段和字符段之间的空格处换行，保留了所有字符段的完整性。撑破包裹元素
word-break还有一些属性：
css代码：
.test{ word-break:normal;}/*浏览器默认换行*/
如果无需保持单词的完整性，break-all可以解决撑破容器的问题，因为在实际应用过程中不会有长度能超过一个容器宽度的单词，所以hyphenate能解决即要单词完整又能不撑破容器，其次在有些场景下可以采用滚动条或者overflow:hidden等来保持界面的完整。
css中字符换行的一些问题的更多相关文章
- CSS中控制换行的四种属性
一.white-space 可以实现HTML中PRE标签的效果,以及单元格的noWrap效果,点此查看示例. Example Source Code 语法: white-space : normal ...
- 深入理解CSS中的空白符和换行
前面的话 CSS3新增了两个换行属性word-wrap和word-break.把空白符和换行放在一起说,是因为实际上空白符是包括换行的,且常用的文本不换行是使用的空白符的属性white-space: ...
- div中的字符换行
div中的字符换行 转载自:http://blog.sina.com.cn/s/blog_6a79bc480100tizi.html 1.强制不换行,同时以省略号结尾. <div style ...
- css中换行与不换行的样式
常见的css样式分为换行与不换行两种需求 1.不换行显示省略号 text-overflow:ellipsis; white-space:normal; 2.换行自适应 word-break: brea ...
- 【CSS】文字超出显示省略号&连续字符换行
方法1.多行控制(css3) .text { width: 100%; word-break: break-all; display: -webkit-box; -webkit-line-clamp: ...
- 理解与应用css中的display属性
理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...
- css中的字体及文本相关属性
css中的字体及文本相关属性 1.字体相关属性 字体主要可以设置color.font-family.font-size.font-size-adjust.font-stretch.font-style ...
- css中的段落样式及背景
一.段落样式 css中关于段落的样式主要有行高,缩进,段落对齐,文字间距,文字溢出,段落换行等.它们的具体语法如下: line-height : normal | length text-indent ...
- CSS实现强制换行-------Day 78
事实上最早的时候也考虑过这个问题,当时还在想须要判定文字的长度么,实在是傻到极点了,原来CSS中本来就有这个样式设置的.而今天正好看到了有这么一篇介绍.细致看了下,感觉还不错,这里也把实验的结果记录下 ...
随机推荐
- ANDROID L——Material Design详细解释（UI控制）
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lolli ...
- UVA714- Copying Books(最大最小化)
意甲冠军:k手稿的部分成m部分,使每一个和最小 思路:典型最大值最小化问题,使用贪心+二分. 贪心的是每次尽量将元素往右边划分,二分查找最小的x满足m个连续的子序列和S(i)都不超过x. 由于输出的原 ...
- SQL入门学习0-数据库与SQL
1.1 DBMS DatabaseManagermentSystem 数据库管理系统 DBMS种类 层次型数据库(HDB) 最古老的数据库之一,把数据通过层次结构的方式表现. 关系型数据库(RDB) ...
- Docker简介（转）
Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间不会有任何 ...
- socket抓取网页
#include <iostream> #include <string> #include <netdb.h> #include <stdio.h> ...
- Windows台cocos2d-x 3.2下载一个新的项目，创造的过程
首先,左右cocos2d-x于windows下一个Android建筑环境, 引用一个网友这个博客<cocos2d-x 3.0rc开发指南:Windows下Android环境搭建>. 这里简 ...
- 数据存储（两）--SAX发动机XML记忆（附Demo）
Android SDK支撑SAX读取技术XML,SAX通过连续的读取方式来处理XML文件.这要求每个读数XML对应的事件触发,以处理该节点的文件的节点.以下是基于一个例子来告诉SAX使用: publi ...
- 【电视桌面CSWUI】电视桌面（launcher）截图欣赏
网络播放器是最重要的电视桌面.cswui,我们公司做了一个非常大的人力,物力搞一个电视柜.后来一一介绍,简言之发送屏幕截图.给大家看. watermark/2/text/aHR0cDovL2Jsb2c ...
- C语言功能 --C
功能名称: cabs 动力 能够: 计算绝对复数值 使用 法国: double cabs(struct complex z); 程序示例: #include <stdio.h> #incl ...
- 快速入门：十分钟学会Python（转）
初试牛刀 假设你希望学习Python这门语言,却苦于找不到一个简短而全面的入门教程.那么本教程将花费十分钟的时间带你走入Python的大门.本文的内容介于教程(Toturial)和速查手册(Cheat ...