Safari で `text-overflow: ellipsis` が効かない場合がある
CSSの text-overflow は、非表示のあふれた内容を処理するプロパティです。
CSS text-overflow: ellipsis
表示する文字が多かった場合、省略記号 (‘…‘) を表示することが多々ありますが、これがCSSだけで可能になるんです。
.text-box {
width: 300px;
border: 1px solid #ccc;
margin-bottom: .5rem;
white-space: nowrap;
overflow: hidden;
}
.ellipsis {
text-overflow: ellipsis;
}<div class="text-box ellipsis">
あいうえおかきくけこさしすせそたちつてとなにぬねの
</div>↓実行結果
あいうえおかきくけこさしすせそたちつてとなにぬねの
Safariで効かない場合がある
通常のテキストの場合は正常に効きますが、spanタグ等が中に入っていると効かなくなる場合があります。（Safariのバグ？）
<style>
.text-box {
width: 300px;
border: 1px solid #ccc;
margin-bottom: .5rem;
white-space: nowrap;
overflow: hidden;
}
.ellipsis {
text-overflow: ellipsis;
}
.label {
line-height: 1.5;
border: 1px solid #777777;
display: inline-block;
padding: 4px;
line-height: 1;
width: 90px;
}<div class="text-box ellipsis">
<span class="label">あいうえお</span>
<span class="label">かきくけこ</span>
<span class="label">さしすせそ</span>
<span class="label">たちつてと</span>
<span class="label">なにぬねの</span>
</div>↓実行結果 Safariで表示すると省略になっていません。
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
JQueryで対応
JQueryで1つずつ計算して対応するしかなさそうです..
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script>
$(function() {
var selector = $('#js_trim');
var parent_width = parseFloat(selector.css('width'));
var total_width = 16; // 3点リーダー分
selector.find('span').each(function(index, element) {
var width = element.getBoundingClientRect().width;
console.log(width);
total_width += width;
if (index > 0) total_width += 5 // span間
if (parent_width < total_width) $(element).hide();
});
if (parent_width < total_width) selector.append('<span>…</span>');
});
</script><div id="js_trim" class="text-box">
<span class="label">あいうえお</span>
<span class="label">かきくけこ</span>
<span class="label">さしすせそ</span>
<span class="label">たちつてと</span>
<span class="label">なにぬねの</span>
</div>
