zoukankan      html  css  js  c++  java
  • 范仁义css3课程---7、文本2(css3文本)

    范仁义css3课程---7、文本2(css3文本)

    一、总结

    一句话总结:

    css对应的文本属性中text-overflow、word-break比较常用,需要好好掌握

    1、设置文本的阴影效果用什么属性?

    text-shadow 属性应用于阴影文本:例如 h1{text-shadow: 2px 2px #ff0000;}

    2、设置 文本溢出包含它的元素之后发生什么 用什么属性?

    text-overflow属性指定当文本溢出包含它的元素,应该发生什么:例如 div.test{text-overflow:ellipsis;}

    3、设置 允许对长的不可分割的单词进行分割并换行到下一行 用什么属性?

    word-wrap属性允许长的内容可以自动换行:例如 p.test {word-wrap:break-word;}

    4、设置 规定非中日韩文本的换行规则 用什么属性?

    word-break属性指定非CJK脚本的断行规则:例如 p.test {word-break:break-all;}

    二、css3文本样式

    1、文字阴影

    text-shadow 属性应用于阴影文本。

    语法

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

    注意: text-shadow属性连接一个或更多的阴影文本。属性是阴影,指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0。

    描述
    h-shadow 必需。水平阴影的位置。允许负值。
    v-shadow 必需。垂直阴影的位置。允许负值。
    blur 可选。模糊的距离。
    color 可选。阴影的颜色。
    h1
    {
        text-shadow: 2px 2px #ff0000;
    }

    2、文字超出设置

    text-overflow属性指定当文本溢出包含它的元素,应该发生什么。

    语法

    text-overflow: clip|ellipsis|string;
    描述
    clip 修剪文本。
    ellipsis 显示省略符号来代表被修剪的文本。
    string 使用给定的字符串来代表被修剪的文本。



    div.test
    {
    text-overflow:ellipsis;
    }

    3、允许对长的不可分割的单词进行分割并换行到下一行

    word-wrap属性允许长的内容可以自动换行。

    语法

    word-wrap: normal|break-word;
    描述
    normal 只在允许的断字点换行(浏览器保持默认处理)。
    break-word 在长单词或 URL 地址内部进行换行。



    p.test {word-wrap:break-word;}

    4、规定非中日韩文本的换行规则

    word-break属性指定非CJK脚本的断行规则。

    提示:CJK脚本是中国,日本和韩国("中日韩")脚本。

    语法

    word-break: normal|break-all|keep-all;
    描述
    normal 使用浏览器默认的换行规则。
    break-all 允许在单词内换行。
    keep-all 只能在半角空格或连字符处换行。
    p.test {word-break:break-all;}

    参考:https://www.runoob.com/css3/css3-text-effects.html

     
  • 相关阅读:
    CodeForces 681D Gifts by the List (树上DFS)
    UVa 12342 Tax Calculator (水题,纳税)
    CodeForces 681C Heap Operations (模拟题,优先队列)
    CodeForces 682C Alyona and the Tree (树上DFS)
    CodeForces 682B Alyona and Mex (题意水题)
    CodeForces 682A Alyona and Numbers (水题,数学)
    Virtualizing memory type
    页面跳转
    PHP Misc. 函数
    PHP 5 Math 函数
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12122584.html
Copyright © 2011-2022 走看看