css3的一些文本属性

182 阅读2分钟

1、word-wrap 允许长单词或者url地址进行换行

 语法: word-wrap:normal | break-word

 浏览器支持:所有主流浏览器都支持该属性 

2、word-break 规定非中日韩文本的换行规则 

浏览器支持:所有主流浏览器都支持该属性 

语法: word-break: normal|break-all|keep-all; 

 // break-all:允许在单词内换行 ; keep-all:只能在半角空格或者连字符处换行 

3、text-overflow 规定当文本溢出包含元素时发生的事情

 浏览器支持:所有主流浏览器都支持该属性 

语法: text-overflow: clip|ellipsis|string; clip:修剪文本; ellipsis:显示省略号来代表被修剪的文本; 

 4、text-transform 规定英文字母的大小写转换 浏览器支持:所有主流浏览器都支持该属性 语法:text-transfrom:uppercase大写|lowercase小写 

 5、text-stroke 文字描边 text-stroke是text-stroke-width和text-stroke-color(给文本填充颜色)两个属性的简写。 text-stroke属性常常配合text-fill-color(text-fill-color属性是给文本填充颜色)一起使用 

一些简单的使用

1.换行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 400px;
				height: 400px;
				border: 3px solid red;
				margin: 0 auto;
				word-wrap: break-word;/* 设置长单词或URL进行换行(默认--normel) */
				/* 设置换行规则 */
				word-break: break-all;/* 允许在单词以内换行 */
				word-break:keep-all;/* 只能在半角空格或连字符处换行 */
			}
		</style>
	</head>
	<body>
		<div>
		111111111111111111111111111111111111111111111111111111111
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		Lorem ipsum dolor sit amet,
		consectetur adipisicing elit. 
		Tempora totam dolorem deleniti repudiandae eaque
		reiciendis eligendi cupiditate in quisquam nesciunt
		dignissimos cumque repellat facere.
		Numquam optio sapiente blanditiis delectus facere.</div>
	</body>
</html>

2.文笔溢出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            width: 400px;
            height:30px;
            margin:  0 auto;
            border: 2px solid pink;
            line-height:30px;
            /* overflow: scroll; *//* 溢出文本以滚动条的形式显示 */
            white-space: nowrap;  /* 空白不换行  所有文本在一行显示 */ 
            overflow: hidden;
            text-overflow: ellipsis;/* 溢出文本显示方式 */ /* 省略号 */
            text-overflow: clip;/* 裁剪 */
            text-overflow:"更多》"; /* string 指定字符 */
        }
        div{
            cursor: pointer;
            /* 英文字母大小写转换 */
            text-transform: uppercase;/* 大写 capitalize--首字母大写 none:去掉转换 lowercase小写*/
            
        }
        div:hover{
            text-transform: none;
        }
    </style>
</head>
<body>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Quibusdam accusamus iusto atque, accusantium dolor delectus
        ducimus et maxime libero modi eveniet quod possimus non deleniti
        praesentium? Quaerat accusantium nisi laborum.
    </p>
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores doloribus odit atque nemo nisi. Earum iste laudantium, ipsa delectus accusantium magni blanditiis ex dolore incidunt debitis! Ratione eos aspernatur mollitia.
    </div>
</body>
</html>

3.文字描边

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       P{
           font: bold 40px/50px "microsoft yahei";
           -webkit-text-stroke: 3px red;
           -webkit-text-fill-color: transparent;
       }
    </style>
</head>
<body style="text-align:center;">
    <p>错过后才懂得珍惜</p>
</body>
</html>