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中本来就有这个样式设置的.而今天正好看到了有这么一篇介绍.细致看了下,感觉还不错,这里也把实验的结果记录下 ...
随机推荐
- java major version(转)
在jar包中,用winrar解压一个类文件,然后在命令行下面输入 javap -verbose classname 会输出一些信息,大致如下: Compiled from "HtmlCraw ...
- android内置存储器memory和第三方外部存储disk管理
缓存管理这里 http://blog.csdn.net/intbird/article/details/38338713 图片处理在这里 http://blog.csdn.net/intbird/ar ...
- YouTube图片幻灯片分享技巧
以前,您将使用的Windows Movie Maker或Picasa的工具,如缝合的图像文件转换成视频上传到YouTube.然而,添美的小编分享了她的技巧,你可以创建一个图片直接进入YouTube的视 ...
- k8s with flanneld
三台机器 kmaster 192.168.1.201 kslave202 192.168.1.202 kslave203 192.168.1.203 安装好k8s 1. 在Node机器上安装flann ...
- 【LeetCode】Algorithms 题集(三)
Search Insert Position 意: Given a sorted array and a target value, return the index if the target is ...
- 一个MP3播放的插件jPlayer
Jplayer小样 最近应公司要求需要一个MP3播放的插件,网上找了很多插件,看来看去还是jPlayer用着最舒服也最容易扩展.所以就找了个资料研究了下,简单做了个小DEMO.支持实时控制列表,常 ...
- ASP.NET MVC 3: Razor中的@:和语法
原文 ASP.NET MVC 3: Razor中的@:和语法 [原文发表地址] ASP.NET MVC 3: Razor’s @: and <text> syntax[原文发表时间] De ...
- The Toast in android
Toast can show the help/prompts to user. There have five effect of toast as bellow: 1.default effect ...
- 如何使用iOS 8 指纹识别,代码、示例
像想象,iOS 8指纹是非常容易使用的.只是需要能够获得一个接口,弹出屏幕模式框,随着app store在相同的. 直接上的条形码.以下代码是从复制Apple官方文件. 加入LocalAuthenti ...
- 使用Xcode和Instruments调试解决iOS内存泄漏
尽管iOS 5.0加入版本号之后ARC机制,由于相互引用关系是复杂的.内存泄漏可能仍然存在.于是,懂原理是非常重要的. 这里讲述在没有ARC的情况下,怎样使用Instruments来查找程序中的内存泄 ...