css_21_css3文本属性

双木桑德斯2024-06-29 9:57

文本阴影

结构：

text-shadow: h-shadow v-shadow blur color;

h-shadow ：必需写，水平阴影的位置。允许负值。
v-shadoy ： 必需写，垂直阴影的位置。允许负值
blur ：模糊的距离。
color ：阴影的颜色

默认值：text-shadow:none 表示没有阴影。

举例：

css 复制代码

        h1 {
            font-size: 80px;
            text-align: center;
            color: white;
            text-shadow: 0px 0px 20px red;
        }

文本换行

结构：

white-space: nowrap;

normal：文本超出边界自动换行，文本中的换行被浏览器识别为一个空格。（默认值）
pre：原样输出，与pre 标签的效果相同。
pre-wrap ：在pre效果的基础上，超出元素边界自动换行。
pre-line ：在pre效果的基础上，超出元素边界自动换行，且只识别文本中的换行，空格会忽略。仅限文本两端的空格。
nowrap ：强制不换行。
举例：

css 复制代码

        div {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            font-size: 20px;
            white-space: nowrap;
        }

文本溢出

结构：

text-overflow: ellipsis;

clip：当内联内容溢出时，将溢出部分裁切掉。（默认值）
ellipsis：内联内容溢出容时，将溢出部分替换。

注意：要使得text-overflow属性生效，块容器必须显式定义 overflow 为非 visible 值， white-space 为nowrap 值。

举例：

css 复制代码

       div {
            margin-bottom: 10px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }