從零開始前端學習[11]:控制文本顯示的樣式屬性

控制文本顯示的樣式屬性

text-align 文字水準顯示方式
line-height 文字垂直顯示方式
text-decoration 文本的修飾方式
text-indent 文本的縮進方式
letter-spacing 文本中字母的間距(對單個漢字或英文字母)
word-spacing 詞間距(對用空格隔開的漢語詞語或單詞作用)
word-break 強制換行
white-space 強制不換行
文本超出的時候的處理方式

提示

部落客:章飛_906285288

部落格位址:http://blog.csdn.net/qq_29924041

text-align 文字水準顯示方式

text-align屬性是文字水準的顯示方式，主要時候控制文字在水準方向的3中狀态：left居于左側顯示，right 居于右側顯示，center居中顯示

text-align:left; //居左側顯示
text-align:right; //居右側顯示
text-align:center; //居中顯示

注意：text-align不僅僅對我們的文本有用，對我們的行級元素以及img标簽都是有用的。，注意text-align是給文本的父級标簽設定的，并且父級元素必須是塊級元素，如果是行級元素的話，預設是内容撐開寬高的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>text-align文本樣式顯示</title>
  <meta charset="UTF-8"><!--申明目前網頁的編碼集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--編輯器的名稱-->
  <meta name="Author" content="作者是誰">       
  <meta name="Keywords" content="關鍵詞">
  <meta name="Description" content="描述和簡介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: ;}
        ul,ol{margin: ; list-style: none; padding: ;}
        a{ text-decoration: none; }
        *{ margin: ; padding: ; }
    .main{width: px;border: px solid red;margin: px auto}
    .main .text{text-align: left}
    .main .span_style{text-align: center}
    .main .img_style{text-align: right;}
  </style>
</head>
<body>
  <div class="main">
    <div class="text">
      關關雎鸠，在河之洲。窈窕淑女，君子好逑。<br>
      參差荇菜，左右流之。窈窕淑女，寤寐求之。<br>
      求之不得，寤寐思服。悠哉悠哉，輾轉反側。<br>
      參差荇菜，左右采之。窈窕淑女，琴瑟友之。<br>
      參差荇菜，左右芼之。窈窕淑女，鐘鼓樂之。<br>
    </div><br>
    <div class="span_style">
      <span>長歌行</span><br>
      <span>青青園中葵，朝露待日晞。</span><br>
      <span>陽春布德澤，萬物生光輝。</span><br>
      <span>常恐秋節至，焜黃華葉衰。</span><br>
      <span>百川東到海，何時複西歸？</span><br>
      <span>少壯不努力，老大徒傷悲！</span>><br>
    </div>
    <div class="img_style">
      <img width="100px" height="100px" src="http://img002.21cnimg.com/photos/album/20150702/m600/2D79154370E073A2BA3CD4D07868861D.jpeg" alt="">
    </div>
  </div>
</body>
</html>

顯示效果如下所示:

從零開始前端學習[11]:控制文本顯示的樣式屬性

line-height 文字垂直顯示方式

line-hight主要是行高，文字垂直顯示方式，參考前一篇部落格文字樣式中的行高

值為像素，當給定的值和父級盒子的高度一緻時，文字會在元素中垂直居中顯示

text-decoration 文本的修飾方式

text-decoration主要是用于文本的修飾方式,文本修飾方式常用為四種屬性值，

none表示預設，即沒有文本修飾樣式，

underline定義文本下的一條線，類似ins标簽，

overline定義在文本上的一條線

line-through定義穿過文本的一條線，類似del标簽

使用的方式如下所示:
text-decoration:none; //預設，定義标準的文本
text-decoration:underline; //定義文本下的一條線
text-decoration:overline; //定義文本上的一條線
text-decoration:line-through; //定義穿過文本的一條線

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明目前網頁的編碼集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--編輯器的名稱-->
  <meta name="Author" content="作者是誰">       
  <meta name="Keywords" content="關鍵詞">
  <meta name="Description" content="描述和簡介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: ;}
        ul,ol{margin: ; list-style: none; padding: ;}
        a{ text-decoration: none; }
        *{ margin: ; padding: ; }
    .main{width: px;margin: px auto;border:px solid deeppink;}
    .main .text_decoration_nono{
      text-decoration: none;
    }
    .main .text_decoration_overline{
      text-decoration: overline;
    }
    .main .text_decoration_underline{
      text-decoration: underline;
    }
    .main .text_decoration_line_through{
      text-decoration: line-through;
    }
  </style>

</head>
<body>
  <div class="main">
    <div class="text_decoration_nono">預設，定義标準的文本</div><br>
    <div class="text_decoration_underline">定義文本下的一條線</div><br>
    <div class="text_decoration_overline">定義文本上的一條線</div><br>
    <div class="text_decoration_line_through">定義穿過文本的一條線</div><br>
  </div>
</body>
</html>

顯示的效果如下所示:

從零開始前端學習[11]:控制文本顯示的樣式屬性

text-indent 文本的縮進方式

text-indent主要的意思是首行縮進，大概的使用場景就是縮進的距離用來做圖檔加載，或者是一個段落的開頭往往需要2個空格，那麼浏覽器不會識别多個空格，多個空格僅僅隻會去加載一個。這就需要用到我們的首行縮進

text-indent：的屬性值可以是px，可以是em，可以是rem等

如：

text-indent:20px;
text-indent:2em;
text-indent:2rem;
text-indent:20%;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明目前網頁的編碼集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--編輯器的名稱-->
  <meta name="Author" content="作者是誰">       
  <meta name="Keywords" content="關鍵詞">
  <meta name="Description" content="描述和簡介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: ;}
        ul,ol{margin: ; list-style: none; padding: ;}
        a{ text-decoration: none; }
        *{ margin: ; padding: ; }
        .main{width: px;margin: px auto;border:px solid deeppink;}
        .main .px p{text-indent: em;}
        .main .em span{text-indent: px}
        .main .rem{text-indent: rem}
  </style>
</head>
<body>
  <div class="main">
    <div class="px">
      <p>一襲素香，兩袖清絕，浩渺天地間驚鴻一眸，袅娜娉婷的嬌豔月容便落入古往今來愛梅之人的輕盈文字裡，久了便歲月生香。書一紙墨梅清痕，用冰冷的指尖在嫩寒清曉裡寫下孑然一身的随遇而安。彌望時光，不管是淩寒獨自開的肅然緘默，還是輸梅一段香的千古絕贊，梅花，在百花齊眠的冷冬，它，終究是茕茕孓立的寂莫。</p>
    </div><br>
    <div class="em">
      <span>一直也想落筆梅香滿袖的楚楚動人，奈何心懶手拙，從來都是看他人煮字暖情的精緻，聽寒香梅雪蕊綻花落的慨歎，然後也跟着低眉淺笑溫暖的期許。如今又是歲幕天寒，再次遇梅，内心倒多出幾分憐惜，誤入繁苑，怎知那抹疏影傾城的空靈潔淨是否甘心盡洗鉛華的寂寞？那不與涼風的嬌媚怎知不是花蕊深處輕輕的遺憾？</span>
    </div><br>
    <div class="rem">
        都說清梅孤傲聖潔，曾經我也這樣覺得，如今卻不以為然。世人總愛将自己的想當然強加于喜歡的花葉山水上，僅僅因為在殘枝敗柳的冬季唯有它傲放于天地，便說它一任群芳妒，因為數九寒天裡物以稀為貴的梅紅雪白，便說它無意苦争春。卻忘了那暗香徐徐的素梅，一直是默然于世，恬淡不驚，在冬日的甯靜裡沉澱着自己的情緒。
    </div>
  </div>
</body>
</html>

注意：text-indent屬性是針對塊級元素的，行級元素預設是内容撐開高度，是以設定text-indent是無效的

顯示效果如下所示:

從零開始前端學習[11]:控制文本顯示的樣式屬性

letter-spaceing 文本中字母的間距(對單個漢字或英文字母)

letter-spacing，其中letter表示字母，文字的意思，spacing表示間隔，是以語義解釋為letter-spacing即為字母間距，

letter-spacing的屬性值為px

即

letter-spacing:10px;//這樣的話，文字就不會顯得擁擠

在上個代碼上面進行修改，即可看出來效果

.main .px p{text-indent: em;letter-spacing: px;}
    .main .em span{text-indent: px;letter-spacing: px}
    .main .rem{text-indent: rem;letter-spacing: px}

顯示:

從零開始前端學習[11]:控制文本顯示的樣式屬性

從上面可以看到，這個屬性是不分行塊的，行級元素也是可以有字間距的

word-spacing 詞間距(對用空格隔開的漢語詞語或單詞作用)

與上面的letter-spacing互相對應的，即單詞間距，首先要确定是單詞，因為每個詞語之間是要有空格進行分割的，連在一起的一句話并不叫單詞，是以word-spacing即為詞間距

使用方式與letter-spacing類似：

word-spacing:20px;//将每個詞語的間距放到了20px;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明目前網頁的編碼集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--編輯器的名稱-->
  <meta name="Author" content="作者是誰">       
  <meta name="Keywords" content="關鍵詞">
  <meta name="Description" content="描述和簡介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: ;}
        ul,ol{margin: ; list-style: none; padding: ;}
        a{ text-decoration: none; }
        *{ margin: ; padding: ; }
        .main{width: px;margin: px auto;border:px solid deeppink;}
        .main .word_spacing{word-spacing: px}
        .main .nomal{word-spacing: px}
  </style>
</head>
<body>
<div class="main">
  <div class="word_spacing">
    i like study html and css!!!
  </div>
  <div class="nomal">
    與上面的letter-spacing互相對應的，即單詞間距，首先要确定是單詞，因為每個詞語之間是要有空格進行分割的，連在一起的一句話并不叫單詞，是以word-spacing即為詞間距
  </div>
</div>
</body>
</html>

顯示效果如下所示：

從零開始前端學習[11]:控制文本顯示的樣式屬性

在上面的單詞間距被拉大到了30px，因為它們是一個個單詞，但是再後一句中并沒有發生改變，因為它是一句話，并不是詞語。

word-break 強制換行

word-break即是強制換行的意思，有時候我們的标簽寬度是有限的，這個時候可能就需要換行，而work-break是支援在單詞内換行，即是剩餘的空格不足以顯示完整單詞的時候，會将單詞分隔，然後上下顯示各一部分

word-break:break-all;
word-break:keep-all;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明目前網頁的編碼集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--編輯器的名稱-->
  <meta name="Author" content="作者是誰">       
  <meta name="Keywords" content="關鍵詞">
  <meta name="Description" content="描述和簡介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: ;}
        ul,ol{margin: ; list-style: none; padding: ;}
        a{ text-decoration: none; }
        *{ margin: ; padding: ; }
        .main{width: px;margin: px auto;border:px solid deeppink;}
        .main .demo1{
          width: px;
          border: px solid green;
        }
        .main .demo2{
          width: px;
          word-break:break-all;
          border: px solid blue;
        }
  </style>
</head>
<body>
  <div class="main">
    <div class="demo1">
       1 i want to be a good coder!!!!
    </div><br>
    <div class="demo2">
       2 i want to be a good coder!!!!
    </div>
  </div>
</body>
</html>

顯示如下所示:

從零開始前端學習[11]:控制文本顯示的樣式屬性

從上面就可以看出來，設定了break-all的屬性值的話，這個時候換行是将單詞進行了拆分，預設的情況是不支援單詞内換行的

white-space 強制不換行

white-space是強制是否換行的意思，因為有時候布局的情況下，會遇到超出的文字不允許顯示到第二行，那麼這個時候就需要white-space與文本超出處理方式進行配合使用

white-space:nowrap;//強制不換行
white-space:wrap;//換行(預設是換行的)

在上述代碼上面做點修改:

.main .demo2{
          width: px;
          border: px solid blue;
          white-space: nowrap;
        }

顯示效果如下:

從零開始前端學習[11]:控制文本顯示的樣式屬性

demo2的顯示是不換行的，但是會出現一個問題就是它超出了我們原來的父級區域，超出了父級顯示，是以需要結合文本超出的時候的來進行處理

文本超出的時候的處理方式

文本超出的時候的處理方式，即文本在不換行的情況下，超出父級的時候，所有超出的文本全部以“…”的形式進行顯示

隻要記住這三個屬性配合使用即可:

white-space: nowrap; //強制不換行
      overflow:hidden;  //超出隐藏
      text-overflow: ellipsis; //文本超出顯示的樣式

對上面的代碼進行修改:

.main .demo2{
          width: px;
          border: px solid blue;
          white-space: nowrap;
          overflow:hidden;
          text-overflow: ellipsis;
        }

顯示如下所示:

從零開始前端學習[11]:控制文本顯示的樣式屬性

可以看到demo2中顯示的超出文本顯示的部分全部以…的形式進行展示，但是…是居中顯示的。

歡迎持續通路部落格

從零開始前端學習[11]:控制文本顯示的樣式屬性

控制文本顯示的樣式屬性

text-align 文字水準顯示方式

line-height 文字垂直顯示方式

text-decoration 文本的修飾方式

text-indent 文本的縮進方式

letter-spaceing 文本中字母的間距(對單個漢字或英文字母)

word-spacing 詞間距(對用空格隔開的漢語詞語或單詞作用)

word-break 強制換行

white-space 強制不換行

文本超出的時候的處理方式

繼續閱讀

前端和背景是如何互動的？

怎樣使用SpringMVC控制頁面

Spring MVC 接收多個實體參數

CSS中僞類和僞元素的差別

Vue項目 - 單檔案元件和Vue中的路由

左耳朵耗子：程式員如何拿到年薪60萬的崗位？

沒救了! 困擾程式員一輩子的5個魔咒, 改掉比登天還難！

[轉]如何成長為一名全棧工程師全棧工程師

underscore模闆功能的使用和學習

CSS之折疊菜單

web開發之前後端渲染

JavaScript的那些坑之事件代理事件代理事件階段

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題