需求如下图所示:
1、价格字体明显大于同行其他字体
2、本行文字全部底对齐
3、我想对价格部分做overflow: hidden的限制
遇到的问题:
<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>¥</span>
<span>2222</span>
</div>
<div class="price-box-2 box">
<span>秒杀价：</span>
<span>¥</span>
<span>2222</span>
</div>
<div class="price-box-3 box">
<span>秒杀价：</span>
<span>¥</span>
<span>2222</span>
</div>
<div class="price-box-4 box">
<span>秒杀价：</span>
<span>¥</span>
<span>2222</span>
</div>
</body>
上面写了个小例子，显示的效果是如下图:
在对价格做overflow处理时，inline元素是不行的，所以对元素设置了inline-block。但是overflow：hidden和display: inline-block一起使用时会造成baseline的移动，加了vertical-align: bottom可以解决这个问题。示例中，所有文字大小一样时看上去效果很完美。但是，一旦目标对象使用了大字体，好像vertical-align并没有解决这个一行文字全部底对齐的问题。
请教各位是否有纯css的解决办法(现在我直接在js中截取了字符串长度，但自觉不是好办法)
先占个坑，需求是价格处如果字数太多 隐藏后面部分？ css的text-overflow:ellipsis; 这个用过没
你试一下给vertical-align设成数字