我在<span>
内显示产品标题。我希望在没有足够的空间时截断标题。我尝试了text-overflow: clipping
,但它没有采用右侧应用的填充。所以我使用text-overflow: ellipsis
,它工作正常,但我不想保持那个“...”最后3个点。是否有任何方法可以通过CSS隐藏或删除它?
答案 0 :(得分:6)
你应该尝试剪辑而不是剪辑。
text-overflow:clip;
=====
编辑:
这可以解决您的问题:
.clipping-wrapper {
border: 1px solid #4099ff;
padding: 0 40px;
display: inline-block;
}
.clipping{
white-space: nowrap;
width: 200px;
overflow: hidden;
text-overflow: clip;
}
<div class="clipping-wrapper">
<p class="clipping">
Copier Paper A4 Size - 70Gsm (500 Sheets)
</p>
</div>
答案 1 :(得分:0)
做出不同的东西
text-overflow
a:after { content: ...
font-size: 0
.clip {
float: left;
display: inline-block;
white-space: nowrap;
width: 200px;
overflow: hidden;
border: 1px solid #4099ff;
padding: 0 40px;
}
.clip.a:after {
content: ' (500 Sheets)';
display: inline-block;
font-size: 0;
}
.clip.b:after {
content: ' (Free Recycling)';
display: inline-block;
font-size: 0;
}
.clip.c:after {
content: ' (20 per Box)';
display: inline-block;
font-size: 0;
}
.clip.d:after {
content: '';
display: inline-block;
font-size: 0;
}
.clip:hover {
overflow: visible;
padding-right: 80px;
}
.clip:hover:after {
font-size: 1rem;
background-color: inherit:
}
&#13;
<div>
<span class="clip a">
Copier Paper A4 Size - 70Gsm
</span>
</div>
<div>
<span class="clip b">
3M Copy Toner Cartridge -
</span>
</div>
<div>
<span class="clip c">
No. 2 Graphite Pencils -
</span>
</div>
<div>
<span class="clip d">
Paper Clips - 200 per Box
</span>
</div>
&#13;