CSS3文本属性

时间:2022-04-21 21:50:22

text-shadow(文本阴影)

  <h1>我有文字阴影</h1>

    h1{

      color:#ffff00;

      text-shadow:1px 2px 2px #000000;

    }

  text-shadow: 横向偏移量(必选)  纵向偏移量(必选)  模糊范围(可选)  阴影颜色;

          

text-overflow(省略号文字截断)

  <div>这是一个盒子装不下的长文本<div/>

    div{

      width:150px;

      border:1px solid #000000;

      white-space:noWrap;       //将文本强制显示在一行

      overflow:hidden;   //超出盒子部分隐藏

      text-overflow有两个值:

        clip:默认值,表示文本截断。

           ellipsis:显示省略号来代表被截断的文本。

      text-overflow:ellipsis;

    }

  

word-break和word-wrap(长文本换行显示):

  </div>I love you sooooooooooooooooooooo much!</div>

    div{

      width:150px;

      border:1px solid #000000;

      word-break:break-all;            //换行显示

      word-wrap:break -word;  //单词重启一行显示

    }