CSS中1些常见的文字特性梳理

2021-01-20 07:30 jianzhan

text-overflow

概述:其功效是处理文字外溢时,其呈现的方式

该特性有两个主要参数,各自以下:

CSS Code拷贝內容到剪贴板
  1. text-overflow : clip | ellipsis  

clip:无法显示省略标识(....),外溢的文字会被的裁掉掉。
ellipsis:文字外溢时会显示信息省略的标识(...),插进的部位是最终1个标识符。

要使该特性起功效,还得具有下列几个标准。

    width | max-width:确立给必须截取文字的器皿设定宽度值。
    white-space:nowrap:给文字器皿设定强制性不换行,让元素文字在1行内显示信息。
    overflow:hidden:设定器皿文字外溢时掩藏。

word-wrap

概述:该特性能够操纵换行。当特性赋值break-word时,将强制性换行,汉语文字沒有任何难题,英文句子也没难题。可是针对针对长串的英文就不起功效,也便是说,word-wrap是操纵是不是短词,而并不是断标识符

该特性有两个主要参数,各自以下:

CSS Code拷贝內容到剪贴板
  1. word-wrap: normal | break-word  

normal :默认设置值,访问器只在半角空格或连标识符的地区开展换行。
break-word: 将內容在界限内换行(不断开英文单词换行)。

其二者的不一样点能够根据下面的比照图开展差别。

由图可知:当word-wrap值为normal时,较长的英小蜜本长度超过器皿的宽度时会撑破器皿屈伸到器皿的外面(IE6以外,IE6会全自动扩展器皿的宽度)。在设定了break-word时,长文字会全自动换行,不够的是,它不容易安裝单词换行,将会会将1个单词断开换行。

另外,word-wrap运用在pre或table中时,将不容易起功效。


word-break

概述:特性关键对于亚洲地区語言和非亚洲地区語言开展操纵换行。当特性赋值break-all时,能够容许非亚洲地区語言文字行的随意字内断掉;当特性值为keep-all时,表明在汉语、韩文、日文中是不容许字断掉的。

该特性的主要参数有3个,其值以下所示:

CSS Code拷贝內容到剪贴板
  1. word-break: normal | break-all | keep-all  

normal:默认设置值,依据語言自身的标准来明确换行方法,汉语到界限上的中国汉字换行,英文从全部单词换行。
break-all:能够强行断开英文单词,做到词内换行实际效果。
keep-all:不容许字断掉。假如是汉语把前后左右标点合乎内的1个中国汉字短语全部换行,英文单词全部换行;假如出現某个英文本符长度超出器皿界限,后边的一部分将撑破器皿,假如边框为固定不动特性,则后边的一部分没法显示信息。(PS:chrome该特性失效,可是新增break-word特性)


white-space

概述:性具备文件格式化文字的功效,当特性赋值为nowrap时,表明强制性在愿意行内显示信息全部文字;当特性值为pre时,表明显示信息预订义文字文件格式。

该特性有下列的赋值状况:

CSS Code拷贝內容到剪贴板
  1. whitewhite-spacenormal | pre | nowrap | pre-line | pre-wrap  

normal:默认设置值,空白会被访问器忽视
pre:空白会被保存,展现预订义文字文件格式
nowrap:文字不容易换行,文字会在1行显示信息
pre-line:合拼空白符编码序列,但保存换行符。
pre-wrap:保存空白符编码序列,可是一切正常开展换行。