我從現象中學到的CSS

本文轉載於:猿2048網站➣我從現象中學到的CSS

文字溢出隱藏

若是你觀察過浮動元素，你會發現這樣一個事實，當前一個元素將寬度佔滿之後，後一個元素就會往下掉，以下所示

代碼以下

<style>
  div,p{
    margin:0;
  }
  #box{
    width: 100px;
    height: 20px;
    border: 1px solid red;
  }
  #box .content{
    float:left;
    height: 100%;
    margin-right: 20px;
  }
</style>
<div id="box">
    <p class="content">CSS</p>
    <p>樂趣</p>
  </div>

也許在你眼裏這是個再正常不過的現象，不過有人卻將這個現象用在了實現文本溢出隱藏上，咱們來看看他們是怎麼實現的。

<style>
      div,p{
        margin:0;
      }
      #box{
        width: 100px;
        height: 20px;
        border: 1px solid red;
      }
      #box p:first-child{
        float:left;
        height: 100%;
        padding-right: 1em;
        word-break:break-all;
        overflow:hidden;
      }
      #box p:last-child{
        position:relative;
        top:-20px;
        text-align:right;
      }
    </style>
<div id="box">
    <p>CSS</p>
    <p>...</p>
  </div>

先來看看它的效果，以下

實現這個效果的原理就是先將省略號經過相對定位移動到box的上方，當第一個元素p的內容超過box元素的寬度時，第二個p元素就會掉下來（一行的高度），若是隻想讓...在第一個p元素內容超出時才顯示，咱們能夠給box元素加上overflow:hidden;便可。

也不必定得用浮動，兩個塊元素也是沒有問題滴，前一個內容越多後一個元素就越日後，很少說上例子。

<style>
      div,p{
        margin:0;
      }
      #box{
        width: 100px;
        height: 20px;
        border: 1px solid red;
      }
      #box p:first-child{
        max-height: 40px;
        padding-right: 1em;
        word-break: break-all;
        overflow: hidden;
      }
      #box p:last-child{
        position: relative;
        top: -44px;
        text-align: right;
      }
    </style>
<div id="box">
    <p>CSS</p>
    <p>...</p>
  </div>

這裏比以前寫的代碼多了一行max-height: 40px;之因此這樣作是由於咱們但願第一個p元素的內容超出才顯示第二個元素，而第二個元素是在當第一個元素的寬超出box纔會被顯示，而只有當第一個p元素2行的時候纔算超出，另外這裏不用height也是有緣由的，若是設置的是height，那麼高度就被固定了，若是高度都固定了，顯然就不可能去影響第二個p元素。

一行居中，多行居左

須要作到1行居中，多行居左，其實也很簡單，咱們知道每一個元素均可以獨自設置本身的文本對齊方式，假如咱們將HTML結構寫成下面這樣

<div id="box">
    <p>CSS樂趣</p>
  </div>

咱們知道父元素是能夠控制子元素的對齊方式的，咱們先將box的text-align設置成center，再將p元素的text-align設置成left，經管如此設置，結果仍是不行的。

<style>
      div,p{
        margin:0;
      }
      #box{
        width:100px;
        border:1px solid red;
        text-align:center;
      }
      #box p{
        text-align:left;
      }
    </style>

結果以下

能夠看到p元素，顯示的是左對齊，並無被居中，其緣由在於p元素的寬是佔滿box元素的，這也是塊元素的一個特色，假如咱們將p元素的display改爲inline或者inline-block，p元素就居中了，以下

咱們將內容加到兩行看看

很顯然這不是咱們所但願看到的，之因此p元素設置的text-align:left;沒有起做用，是由於此時p元素是行內元素，它的寬度是隨着內容自適應的，因此永遠都不可能多出空間來，既然沒有多出的空間，天然就不可能有對齊方式，由於內容就佔滿了整個空間，雖然行內元素作不到，可是行內塊則是能夠的，以下

行內塊元素的寬雖然是根據內容來的，但和行內元素不一樣的是，行內塊元素的的每一行行寬都已經肯定了的（最寬的行寬），因此行內塊在內容沒有佔滿的狀況下，是能夠設置文字的對齊方式的。