我从现象中学到的CSS

2019/09/11 10:28
阅读数 51

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

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

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部