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

行内块元素的宽虽然是根据内容来的，但和行内元素不一样的是，行内块元素的的每一行行宽都已经肯定了的（最宽的行宽），因此行内块在内容没有占满的状况下，是能够设置文字的对齐方式的。