我从现象中学到的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元素是行内元素，它的宽度是随着内容自适应的，所以永远都不可能多出空间来，既然没有多出的空间，自然就不可能有对齐方式，因为内容就占满了整个空间，虽然行内元素做不到，但是行内块则是可以的，如下

行内块元素的宽虽然是根据内容来的，但和行内元素不同的是，行内块元素的的每一行行宽都已经确定了的（最宽的行宽），所以行内块在内容没有占满的情况下，是可以设置文字的对齐方式的。