如何使文本使用溢出省略号答案

【问题标题】：How do I make the text use overflow ellipsis如何使文本使用溢出省略号
【发布时间】：2020-12-10 19:11:56
【问题描述】：

所以我有这张卡片，里面有一个 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>

【问题讨论】：

标签： html css asp.net asp.net-mvc twitter-bootstrap

【解决方案1】：

您的元素需要在 display: block 或 display: inline-block 中。

/* 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>

【讨论】：