CSS中一些常用的文本属性整理

所属分类: 网页制作 / CSS 阅读数: 846
收藏 0 赞 0 分享

text-overflow

概要:其作用是解决文本溢出时,其展现的形式

该属性有两个参数,分别如下:

CSS Code复制内容到剪贴板
  1. text-overflow : clip | ellipsis  

clip:不显示省略标记(....),溢出的文本会被的裁减掉。
ellipsis:文本溢出时会显示省略的标记(...),插入的位置是最后一个字符。

要使该属性起作用,还得具备以下几个条件。

    width | max-width:明确给需要截取文本的容器设置宽度值。
    white-space:nowrap:给文本容器设置强制不换行,让元素文本在一行内显示。
    overflow:hidden:设置容器文本溢出时隐藏。

word-wrap

概要:该属性可以控制换行。当属性取值break-word时,将强制换行,中文文本没有任何问题,英文语句也没问题。但是对于对于长串的英文就不起作用,也就是说,word-wrap是控制是否短词,而不是断字符

该属性有两个参数,分别如下:

CSS Code复制内容到剪贴板
  1. word-wrap: normal | break-word  

normal :默认值,浏览器只在半角空格或连字符的地方进行换行。
break-word: 将内容在边界内换行(不截断英文单词换行)。

其两者的不同点可以通过下面的对比图进行区别。
2015721164910251.png (600×144)

由图可知:当word-wrap值为normal时,超长的英文文本长度大于容器的宽度时会撑破容器伸展到容器的外面(IE6除外,IE6会自动拓展容器的宽度)。在设置了break-word时,长文本会自动换行,不足的是,它不会安装单词换行,可能会将一个单词截断换行。

同时,word-wrap应用在pre或者table中时,将不会起作用。


word-break

概要:属性主要针对亚洲语言和非亚洲语言进行控制换行。当属性取值break-all时,可以允许非亚洲语言文本行的任意字内断开;当属性值为keep-all时,表示在中文、韩文、日文中是不允许字断开的。

该属性的参数有三个,其值如下所示:

CSS Code复制内容到剪贴板
  1. word-break: normal | break-all | keep-all  

normal:默认值,根据语言自己的规则来确定换行方式,中文到边界上的汉字换行,英文从整个单词换行。
break-all:可以强行截断英文单词,达到词内换行效果。
keep-all:不允许字断开。如果是中文把前后标点符合内的一个汉字短语整个换行,英文单词整个换行;如果出现某个英文字符长度超过容器边界,后面的部分将撑破容器,如果边框为固定属性,则后面的部分无法显示。(PS:chrome该属性无效,但是新增break-word属性)


white-space

概要:性具有格式化文本的作用,当属性取值为nowrap时,表示强制在同意行内显示所有文本;当属性值为pre时,表示显示预定义文本格式。

该属性有以下的取值情况:

CSS Code复制内容到剪贴板
  1. whitewhite-spacenormal | pre | nowrap | pre-line | pre-wrap  

normal:默认值,空白会被浏览器忽略
pre:空白会被保留,呈现预定义文本格式
nowrap:文本不会换行,文本会在一行显示
pre-line:合并空白符序列,但保留换行符。
pre-wrap:保留空白符序列,但是正常进行换行。

更多精彩内容其他人还在看

Opera中国的WEB标准课程

网页制作Webjx文章简介:在这篇文章里,我要向大家介绍我和其他很多人花费数月时间开发的一个课程——Web标准课程,该课程旨在向大家提供Web设计和开发的坚实基础,无论读者是谁,此教程完全免费、可访问,并且不需要预备知识。当然,我主要还
收藏 0 赞 0 分享

CSS样式表渐进增强的基本概念

网页制作Webjx文章简介:如果你挠着头想弄清楚优雅降级和渐进增强的区别,我告诉你,这是视角问题。优雅降级和渐进增强都考虑网站在各种设备的各种浏览器上如何良好运转。两者区别的关键在于它们各自关注的焦点,以及这种关注对工作流程的影响
收藏 0 赞 0 分享

简单介绍Web Developer插件制作网页

网页制作Webjx文章简介:Firefox浏览器是一个良好支持W3C标准的开放源代码的浏览器,拥有Linux/Windows/Mac版本。因为Firefox浏览器良好支持W3C标准,所以使用Firefox来调试网页是非常好的。 Firefox浏览器是
收藏 0 赞 0 分享

CSS布局带来的巨大影响:CSS display属性值

网页制作Webjx文章简介:网页元素应用上那些与表格相关的display属性值后,能够模仿出与表格相同的特性。我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响。 应原书编辑要求,先在文章顶部给出链接:《Everything You
收藏 0 赞 0 分享

用div css模拟表格对角线

这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点。如果对此深以为然的朋友,请一笑过之 首先声明: 这只是探讨一种CSS模拟表格对角线的
收藏 0 赞 0 分享

IE Firefox在css中的差别 (部分)

1、单位问题 问题:任何距离的数值ie可以不加单位,ff必须要求写单位(0除外) 解决:写全单位如padding:0px; 2、水平居中 问题:div里的内容,ie默认为center,而ff默认left 解决:mairgin:0px auto; 3、高度问题
收藏 0 赞 0 分享

不用js可以实现信息提示效果

[code] <style> body { font:verdena; font-size:14px; color:#000 } h1{ font:verdena; font-size:22px; color:#000 } h2{ font:verdena;
收藏 0 赞 0 分享

CSS解决未知高度的垂直水平居中自适应问题

今天有人问起,晚上试着写出来,供参考; 以下代码兼容主流浏览器IE6、IE7、Firefox、Opera。 从最简单的开始………… 一、如何让一个DIV水平居中? 这个简单不作过多说明! [code] <st
收藏 0 赞 0 分享

CSS cursor 属性 -- 鼠标指针样式效果

取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize |
收藏 0 赞 0 分享

css 简单区别ie6,ie7,firefox的写法

同一样式里可以这样 [code] margin:17px; FF +margin:17px; IE6 IE7 _margin:17px; IE6 [/code] 按这个顺序,刚好区分开三个浏览器
收藏 0 赞 0 分享
查看更多