CSS3-文本-word-wrap,word-break,white-space
一、word-wrap使用:
语法:
word-wrap : normal | break-word
取值说明:
1、normal为默认值,当其值为normal控制连续文本换行(允许内容顶开容器的边界,换句话说内容可以撑破容器);
2、break-word将内容在边界内换行(不截断英文单词换行,截断英文单词换行需要使用word-break:all属性),我们先来看两个简单的实例:
效果:
从效果中可以明显的看到原始地址和下面两串超长英文(实际中是没有这样的,只是为了测试写的恶意英文)都超出了box的边框,但在IE6下是自己扩展了box的宽度,具体原因我在这里不说了,因为大家都知道呀。所以当word-wrap:normal时,超长的英文长度大于box的宽度时会撑破box伸展到box外(除IE6以及IE6以下版本之外),因为normal是其默认值,当你在别处设置了word-wrap别的值外,而要取消当初的设置,你可以将其设置为normal值,回到当初原始状态值。
从效果中可以明显的看到当word-wrap值为break-word时,超长英文大于box的宽度时,其碰到box边缘会自动折行显示
两个简单的实例效果对比,大家可以明显的区别出有word-wrap的两个值的作用,但当word-wrap应用在<pre>和<table>中时,是没有任何效果,
二、word-break使用:
word-wrap:break-word只能在内容中换行,而不能实现词内换行,如果需要词内换行,我们需要使用word-break属性
语法:
word-break:normal | break-all | keep-all
取值说明
1、normal为默认值,如果设置为默认值时中文则到边界处的汉字换行,如果是英文整个单词换行,如果出现某个单词长度过长,则会撑破容器,如果边框为固定属性,则后面部分将无法显示;
2、break-all:可以强行截断英文单词,达到词内换行效果
3、keep-all:不允许字断开。如果是中文将把前后标点符号内的一个汉字短语整个换行,英文单词也整个换行,如果出现某个英文字符长度超过边界,则后面的部分将撑破容器,如果边框为固定属性,则后面部分无法显示
效果图说明了word-break取值为normal时,和word-wrap值为normal一样的效果,超长英文文本宽度大于box的宽度时会撑破box伸展出去(除IE6及其以下版本),另为当其值设置normal时会覆盖其前面所设的值。
效果上显示,超长英文文本碰到box边框处的字母会自动换行,但这里需要说明一点,在Firefox和Opera下是没有效果的,也就是说Firefox和Opera不会直接断词;因为firefox和opera根本不支持这个属性。如果使用这个词需要加上overflow:hidden让他在firefox和Opera下超出部分隐藏。
综合上述内容:我们在实际中主要碰到的是长串英文和英文单词如何断行的问题,对于长串英文,我个人认为是个恶意的东西,我们没有必要去理会他,但对于长串的英文单词,我让为不能在单词的某个部位断开,换句话说最好是行内换行而不应该是词内换行,这样一来最好的方式是使用
word-wrap:break-word;
overflow:hidden;
而不应该使用
word-wrap:break-word;
word-break:break-all;
当以上word-wrap:break-word放在<pre>和<table>标签中时,在Firefox和Opera下是不会换行的
三、white-space属性:
white-space语法
white-space: normal || pre || nowrap || pre-line || pre-wrap || inherit
取值说明
1、normal:为其默认值。空白处会被浏览器忽略,往往可以通过设置这个值恢复到默认值下下图所示:
2、pre:空白处会被浏览器保留,其行为方式就类似于HTML中的<pre>标签,如下图所示:
3、nowrap:文本不会换行,文本会在同一行上,直到碰到了换行标签<br />为止,如下图所示:
4、pre-line:合并空白符序列,但保留换行符,此属性不支持IE7.0-,Firefox30-,Opera9.2-下以版本浏览器,如下图所示:
5、pre-wrap:保留空白符序列,但是正常进行换行,此属性值不支技IE70-,Firefox3.0-版本浏览器,如下图所示
6、inherit:规定应该从父元素继承white-space属性的值,此属性值在所有的IE版本都不支持
此时我们可以根据上面介绍的内容,给pre制作出一个兼容浏览器的写法:
pre{
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap !important; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word; /* IE 5+ */
}
另外一点就是word-wrap和break-word直接应用在table中是没有效果的,为了解决这个bug,只能在table中加上下面的属性:
table {
table-layout: fixed;
width: 100px;/*设置表格宽度*/
}
我们在不同的地方使用时应该用不同的属性结合,下面我觉得项目中应该如下使用
一、pre标签自动换行:
pre{
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap !important; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word; /* IE 5+ */
}
二、td标签自动换行
table {
table-layout: fixed;
width: *** px;
} table td {
overflow: hidden;
word-wrap: break-word;
}
三、除pre,td标签外其他标签自动换行:
element {
overflow: hidden;
word-wrap: break-word;
}
四、标签内容强制不换行:
element {
white-space: nowrap;
word-break: keep-all;
}
转载自http://www.w3cplus.com/
CSS3-文本-word-wrap,word-break,white-space的更多相关文章
- word break和word wrap
默认情况下,如果同一行中某个单词太长了,它就会被默认移动到下一行去: word break(normal | break-all | keep-all):表示断词的方式 word wrap(norma ...
- word wrap 解惑
源起 我们经常需要“修复”一个老生常谈的“bug”,那就是文本的自动换行问题.在专业术语上,这种期望得到的渲染现象被称作“word wrap”,即文本处理器有能力把超出页边的整个词自动传到下一行. 在 ...
- .net下将富文本编辑器文本原样读入word文档
关键词:富文本编辑器 生成word 样式 为了解决标题中提出的问题,首选需要了解,在.net环境下读取数据库中的内容动态生成word至少有2种方式,[方式一]一种方式是在项目中添加引用,例如在“添 ...
- C#导出文本内容到word文档源码
将做工程过程中较好的代码片段珍藏起来,下面的代码内容是关于C#导出文本内容到word文档的代码,希望能对小伙伴们也有好处.<%@ Page Language="C#" Aut ...
- Spire.Cloud.Word 添加Word水印(文本水印、图片水印)
概述 Spire.Cloud.Word提供了watermarksApi接口可用于添加水印,包括添加文本水印(SetTextWatermark).图片水印(SetImageWatermark),本文将对 ...
- HTML 学习笔记 CSS3 (文本效果)
text-shadow 语法 text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none ...
- [HTML] CSS3 文本效果
CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow word-wrap 浏览器支持
- reverse the string word by word
题目:Given an input string, reverse the string word by word. For example,Given s = "the sky is bl ...
- CSS3 文本装饰
浏览器对CSS3文本特性的支持情况,如下表所示: 浏览器 text-shadow text-overflow word-wrap hyphens Opera 9.5+ 9+.带前缀-o- 10.5+ ...
- LeetCode 5:Given an input string, reverse the string word by word.
problem: Given an input string, reverse the string word by word. For example: Given s = "the sk ...
随机推荐
- JDBC连接池一 自定义连接池
package com.mozq.jdbc; import java.io.IOException; import java.io.InputStream; import java.sql.Conne ...
- 前端开发 - Emmet使用手册
Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具: 基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为"片段".虽然片段能很 ...
- [筆記]catalan卡特蘭數
前言:希望自己每個星期能發一篇文章,提升一下寫文章的能力?雖然對語文作文毫無幫助但是總比玩遊戲強 所以不務正業的東西就不放在首頁了,有興趣的可以點分類去看 來源:https://www.cnblogs ...
- python之yagmail发送邮件
yagmail发送邮件 import yagmail yag = yagmail.SMTP(user="xxxxxxxxxx@163.com",password="xxx ...
- urllib库的基本使用
urllib库的使用 官方文档地址:https://docs.python.org/3/library/urllib.html 什么是urllib Urllib是python内置的HTTP请求库包括以 ...
- Flask (七) 部署
阿里云部署Flask项目 部署Flask项目和部署Django项目基本一致,我们也使用uwsgi+nginx 我们在部署Django项目基础上部署Flask项目 1, 将uwsgi.ini ...
- 排序算法(C语言+Python版)宝宝再也不怕面试官写排序算法了
直接插入排序 过程: 1. 数据可分看成两个部分,前面的数据是有序的 2. 从后面的数据取出一个元素,插到前面有序数据的合适位置 从右端开始查找,到找到比此元素大的时候,则此元素向后移动,以空出多余的 ...
- C#入门笔记3 表达式及运算符
C#表达式 表达式,把变量.字面值与运算符组合起来,就创建表达式,是计算的基本构件.字面值:是源代码中键入的数字.字符串,表示指定类型的值.常用有几种:整数.实数.字符.字符串. 整数字面量[也能使用 ...
- [转]Java 8 Optional类深度解析(null处理)
原文链接:http://www.importnew.com/6675.html 本文由 ImportNew - 高俊阳 翻译自 javacodegeeks.欢迎加入翻译小组.转载请见文末要求. 身为一 ...
- vue2.0:(一)、vue的安装和项目搭建(以外卖app项目举例)
vue系列踩坑大作战由此就要开始了,准备好了吗,和我一起踩坑,学会vue吧.同时,也欢迎大家把自己遇到的坑发出来,让更多的人学会vue,因为我深知前端学习新框架不容易,尤其是我这种半路出家的女前端.不 ...