强制span不换行

标签：

      对于上一篇提到的overflow的问题我好像搞懂一些了。事情大概是这个样子的：如果用了float属性，那么元素就会脱离文本的束缚，无法无天起来，这肯定是猿类无法忍受的。要想让他们乖乖就范，要么用清除浮动，要么用overflow属性。这是两种解决方法，不需要同时使用。但有一点要特别注意的，overflow：hidden这句话一定要写在父容器里才有效果。重要的事情说三遍：父容器~~父容器~~父容器~~。

      好了，言归正传。今天要解决的问题是，限制span标签不换行，并使超出的部分以点号代替。

      需求效果图：  

      实现代码如下：

1. HTML代码

<div>
    <span class="spanStyle">费用自理</span>
    <span>80000000</span>
    <span><img src="../img/tip.png"></span>
</div>

当然，字体颜色样式按需求而定，此处只讲跟换行设置相关的。

      2. css代码

.spanStyle{  
      white-space: nowrap;  /*强制span不换行*/
      display: inline-block;  /*将span当做块级元素对待*/
      width: 32px;  /*限制宽度*/
      overflow: hidden;  /*超出宽度部分隐藏*/
      text-overflow: ellipsis;  /*超出部分以点号代替*/
      line-height: 0.9;  /*数字与之前的文字对齐*/
}

至此，功能实现。

      那么现在再来理一下这件事的逻辑。要想让span不换行，并且以点号代替超出的内容，则肯定要有相应的代码；超出长度不换行，那么这个span怎么着也要有个长度吧！所以要限定宽；可是span不吃这一套，所以要把它变成块级元素（至于用inline-block还是用block视情况而定，此处我的span后面还要排列一张图片，因此我用了inline-block）。要做的事情已经结束啦，可是发现限定为块级元素后，数字与之前的文字对不牢了，所以灵机一动，调整了一下行高。不知道这个做法是不是主流，不过可以对其了。后来发现之后的图片与数字也对不齐了，调整一下图片对齐方式就可以了。图片对齐默认的应该是中部对齐，我将其调整成了底部对齐，也就是这句代码：

vertical-align: bottom;

  这个问题圆满解决，收工。

强制span不换行

标签：

原文地址：http://www.cnblogs.com/LXJ-CHEER/p/4713298.html