Bootstrap 5.2.2. text-truncate
类在<label>
元素中似乎不起作用:
下面是该屏幕截图的HTML:
<div class="form-row">
<div class="col-md-2">
<div class="form-group">
<label class="text-truncate" for="card_printed">Card Printed</label>
<select name="card_printed" id="card_printed" class="form-select">
<option value="0" selected>No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="text-truncate" for="certificate_printed">Certificate Printed</label>
<select name="certificate_printed" id="certificate_printed" class="form-select">
<option value="0" selected>No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="text-truncate" for="is_duplicate">Is Duplicate</label>
<select name="is_duplicate" id="is_duplicate" class="form-select">
<option value="0" selected>No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
</div>
我不知道任何CSS会覆盖text-truncate
类。查看控制台,我看到.text-truncate
具有预期的样式overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
,label
具有截断所需的display: inline-block;
。
我做错了什么,有什么办法?
1条答案
按热度按时间cxfofazt1#
这是因为引导标签具有属性显示:inline-block和text-truncate属性仅适用于block.so,它们可以覆盖inline-block属性或将label替换为div