一定の幅を超えたら3点リーダーを表示したい

Question

前提・実現したいこと

画像のようなアカウント名・ユーザーID・投稿時間の３つを横に並列し、アカウント名やユーザーIDが右端まで到達するほど長くなった場合はまずユーザーIDの一部を3点リーダーで非表示、それ以上長くなった場合はアカウント名を3点リーダーで非表示にする処理を作りたいです。投稿時間は3点リーダーを適用せず常に表示したいです。

該当のソースコード

<div class="user_profile">
<a href="{{ route('users.show', $topComment->user) }}"
class="_ellipsised">
<span class="name">{{ $topComment->user->name }}</span>
<span class="screen_name">@screen_name</span>
</a>
<span class="date">{{ $comment->updated_at->diffForHumans() }}</span>
</div>

.user_profile {
    display: flex;
    margin-left: 50px;
}

.user_profile a {
    -webkit-line-clamp: 1;
}

.user_profile .name {
    display: inline-block;
    margin-right: 4px;
    max-width: 440px;
    font-weight: bold;
}

.user_profile .screen_name {
    vertical-align: text-bottom;
    margin-right: 8px;
}

.user_profile .date {
    display: inline-block;
    color: #999;
}

Answer 1

記載いただいたCSSの最初の2つを変更することで、おおむね実現できるかもしれません。

.user_profile {
    display: flex;
    margin-left: 50px;
    align-items: flex-start;
}

.user_profile a {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.user_profile のほうの説明

display:flex のみですと、 aタグの高さが高くなってしまう場合があるため、
念のため align-items: flex-start;を追加しました（align-items:center; 等でも問題ないです）

.user_profile a のほうの説明

以下の3つを追加しました。
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;

line-clampを実現するためには、これらを組み合わせて使う必要があるようです。

参考にした記事：CSS : 「line-clamp」 で表示行数を制御する

Comments

[suika11]

勉強になりました。ありがとうございます

Answer 2

直接の解決ではないですが、CSSのみでtruncateするソースコードを貼りますね。（文字を規定の量で切り落とすことを、truncateと言います）

https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

アカウント名やユーザーIDが右端まで到達するほど長くなった場合はまずユーザーIDの一部を3点リーダーで非表示、それ以上長くなった場合はアカウント名を3点リーダーで非表示にする

この条件をメディアクエリで書くことが出来れば、期待の挙動は実装出来るでしょう。

Comments

[suika11]

ありがとうございます。とても勉強になりました。また何かありましたらよろしくお願いします。