开发者社区> 问答> 正文

当display: inline-block遇上overflow: hidden

需求如下图所示:
1、价格字体明显大于同行其他字体
2、本行文字全部底对齐
3、我想对价格部分做overflow: hidden的限制
screenshot
遇到的问题:

    <head>
        <style type="text/css">
            .box {
                font-size: 16px;
                color: red;
                margin-bottom: 30px;
                border: 2px solid pink;
            }
            .box span:nth-child(1) {
                color: #666;
            }
            .box span:nth-child(3) {
                overflow: hidden;
                display: inline-block;
                max-width: 60px;
            }
            .price-box-2 span:nth-child(3) {
                vertical-align: bottom;
            }
            .price-box-3 span:nth-child(3) {
                font-size: 120px;
            }
            .price-box-4 span:nth-child(3) {
                font-size: 120px;
                vertical-align: bottom;
            }
        </style>
    </head>
    <body>
        <div class="price-box box">
            <span>秒杀价:</span>
            <span>&yen;</span>
            <span>2222</span>
        </div>
        <div class="price-box-2 box">
            <span>秒杀价:</span>
            <span>&yen;</span>
            <span>2222</span>
        </div>
        <div class="price-box-3 box">
            <span>秒杀价:</span>
            <span>&yen;</span>
            <span>2222</span>
        </div>
        <div class="price-box-4 box">
            <span>秒杀价:</span>
            <span>&yen;</span>
            <span>2222</span>
        </div>
    </body>

screenshot

展开
收起
a123456678 2016-05-27 17:19:02 2194 0
1 条回答
写回答
取消 提交回答
  • 给vertical-align设成数字

    2019-07-17 19:18:24
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载