强制span不换行

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

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

需求效果图：

实现代码如下：

HTML代码

<div>

    <span>费用自理</span>

    <span class="spanStyle">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不换行

最新文章

热门文章