如何使文本使用省略号

问题描述

所以我的这张卡内有一个div。我的想法是，我想在图标左侧显示一个图标，然后在图标右侧显示一个文本，指示用户名最长为32个字符。

<div>
    <h5 class="d-inline"><i class="icofont icofont-social-snapchat"></i></h5>
    <p class="d-inline">rwmGhw9El8cBMeyvzQ18fmZP2EbLaQhY</p>
</div>

问题在于，当我开始缩小页面时，文本会出现在图标下方的位置，并且开始在卡的外部移动。

我实际上不确定为什么会发生这种情况或解决此问题的最佳方法是什么。

如何正确处理此类问题？加省略号是个好主意吗？

这是卡片的标记

<div class="col-xl-4 px-2">
    <div class="card card-with-border mt-5 ">
        <div class="card-body mb-0">
            @foreach (var item in user.Tags)
            {
                <span class="badge badge-primary mt-3 ml-0">@item</span>
            }
        </div>

        <div class="card-body socialprofile filter-cards-view pt-2">


            <div class="media">

                <div class="avatar ratio"><img class="b-r-8 height-50 mr-3 img-80" src=@user.Image alt="#"></div>
                <div class="media-body">
                    <h6 class="font-danger f-w-600">Hello,World!</h6>
                    <div>
                        <h5 class="d-inline"><i class="icofont icofont-social-snapchat"></i></h5>
                        <p class="d-inline">rwmGhw9El8cBMeyvzQ18fmZP2EbLaQhY</p>
                    </div>
                    <span class="card-text"><h5><i class="icofont icofont-social-instagram"></i></h5><p></p></span>
                    <p class="card-text mt-2">Testing the text lets see what it looks like.</p>
                </div>
            </div>
            <div class="social-btngroup d-flex">
                <button class="btn btn-primary w-100">Like</button>
            </div>
            <div class="likes-profile text-center">
                <h5> <span> <i class="fa fa-heart font-danger"></i> 884</span></h5>
            </div>
        </div>
    </div>
</div>

解决方法

您的元素需要显示在：块或显示在行内块。

/* Limit size of media-body */
.media-body {
    max-width: calc(100% - 2rem); 
}
.ellipsis {
    display: block !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

<div>
    <h5 class="d-inline"><i class="icofont icofont-social-snapchat"></i></h5>
    <!-- Add the class ellipsis where you want -->
    <p class="d-inline ellipsis">rwmGhw9El8cBMeyvzQ18fmZP2EbLaQhY</p>
</div>