CSS字符串的文本属性

1.line-height

可以为没有单元的元素指定一个缩放因子,以便其后代元素继承缩放因子,然后根据其大小计算其自己的行高(行高)值。

复制代码代码如下所示:
{体
字体大小:12px;
线高度:1.5;
}

{ H1
字体大小:36px;
}


在这里,身体的高度18px(12×1.5),H1线高度54px(36×1.5)。

即使相关单位如EM、百分比等的使用,后代元素仍将继承计算行高(线高度)的值,例如,如果上面的身行高改为1.5em,然后H1行高将继承价值18px。

2.text-decoration

文本修饰符是一个非继承类属性,将体元素设置为零,不影响子代中的默认文本修饰符,如超链接,因此,如果我们想删除超链接的默认下划线,则需要分别设置它们。

复制代码代码如下所示:
{
文字装饰:无;
}


虽然该属性默认不继承,但祖先元素上的修改扩展到子元素,

复制代码代码如下所示:
我有下划线。为什么我有下划线


复制代码代码如下所示:
{ p
颜色:红色;
文字装饰:下划线;
}

P跨{
颜色:绿色;
文字装饰:无;
}




这里的下划线是p元素。

复制代码代码如下所示:
{ p
颜色:红色;
文字装饰:下划线;
}

P跨{
颜色:绿色;
文字装饰:下划线;
}




由于文本修饰符属性的扩展会导致一些兼容性问题,

最好的方法是为需要修改的文本单独设置文本装饰属性。

3.text-indent

可以使用此属性对每个段落缩进2个字符,而不是使用空格,

复制代码代码如下所示:
{ p
文本缩进:2em;
}




还可以指定负值,这是第一行暂停效果,



制作引号也是一种常见的做法。



让文本缩进到一个足够让文本消失的地方。

复制代码代码如下所示:
文本缩进:- 9999px;


因此,普通图像取代了常用的文本方法,

复制代码代码如下所示:
{。标志
背景:URL(徽标)不重复;
显示:内联块;
身高:36px;
文本缩进:- 9999px;
宽度:72px;
}


IE6 / 7不支持内联块。在某些情况下,它可能导致标志消失。可以使用浮动或块代替内联块,但它们都将更改布局方式或使用其他方法。

4.text-overflow

一般来说,当URL超出容器时,URL地址的一长串会溢出,当文本溢出包含容器时,我们可以设置省略号。

复制代码代码如下所示:
{李
溢出:隐藏;
文本溢出:省略号;
}




你必须配合溢出:隐藏;一起使用;有时你可能需要加上一个宽度,比如IE 6,

对于默认未溢出的文本,需要强制在一行中显示以产生效果。

复制代码代码如下所示:
{李
溢出:隐藏;
文本溢出:省略号;
白色的空间:不换行;
宽度:100% IE 6;
}


使用空格:前置或换行符:保留所有;它也可以强制文本显示在一行上,但存在各种问题。

在IE 8 9中,有时没有效果。也许,祖先元素的元素设置自动换行:打破的话,这个属性会比白色空间更强大:不换行,所以有时下代码添加。

复制代码代码如下所示:
换行:正常;


5.text-shadow

在非白色背景的深色文本中,可以达到漂亮的镶嵌效果。

复制代码代码如下所示:
文字阴影:0 1px 0 RGBA(255255255。75);


可以在文本中添加一个阴影,用逗号分隔。

复制代码代码如下所示:
文字阴影:0 1px 0 # FFF,0 2px 0 # DDD,0 3px 0 # DDD,0 4px 0 # DDD;




6.white-space

空白属性设置如何处理元素内的空白。

设定值不换行使文本可以继续在同一条直线上,与边界不会改变直到遇到标签。

复制代码代码如下所示:
白色的空间:不换行;


有时我们希望保留文本中的空格和换行符,例如显示计算机的源代码,空格属性的值是预先的。

复制代码代码如下所示:
{预
空白:预;
}


预处理并不令人满意,当涉及到边界时,它不会自动改变,所以CSS 2.1增加了预包装。

复制代码代码如下所示:
{预
空白:预;
空白:预包装;
}


这样,预元素的内容就可以保持原有的格式,内容超出边界时自动改变。

因为并非所有浏览器都支持预包装,所以还需要使那些不受支持的浏览器强行更改其行,

复制代码代码如下所示:
{预
空白:预;
空白:预包装;
换行词;
}


当然,也许你不想改变,你不介意水平滚动条,可以通过水平滚动条代替。

复制代码代码如下所示:
{预
溢出:自动;
}


7.word-break

目前,WebKit的家人(包括谷歌浏览器、Safari、Android浏览器,等等)不支持把所有的价值,所以它可以被用来作为一个打破一切,太。

复制代码代码如下所示:
单词破解:全部中断;


但它会引起英语文本阅读障碍,应谨慎使用。



8.word-wrap

这是实现文本行的好方法,而不是单词中断。

复制代码代码如下所示:
换行词;


添加一个溢出隐藏,以避免一些恶意连续字符,

复制代码代码如下所示:
溢出:隐藏;