时间戳

首页 > 解决方案 > Text-Truncate 类不适用于各种浏览器大小如果浏览器大小很小

html - Text-Truncate 类不适用于各种浏览器大小如果浏览器大小很小

问题描述

我正在写一个聊天室消息模板。我对长消息椭圆使用了文本截断类。但它在我的代码中不起作用。

<div style="display: flex; background-color: beige; font-size: 14px; width: 10%;">
    <!-- favorite-->
    <div>
        <img src="./images/ic-mentor.png" style="border-radius: 15px; border: 1px solid #dddddd; width: 75px; height: 75px;"/>
    </div>
    <div style="flex-grow: 1;">
        <div class="clearfix">
            <img src="./images/ic-mentor.png"/>
            <span>
                TEST_USER
            </span>
            <span>
                <!-- &nbsp;|&nbsp; -->
                <!-- Characters -->
                
            </span>
            <span style="float:right">
                PM 01:16
            </span>
        </div>
        <div class="text-truncate">
            adssasdaasdsadsaasdadsadssdasdadsaadsadssadasasddassad
        </div>
    </div>
</div>

上面的代码是我的示例代码。我想用 truncate 类编写一个小浏览器大小的工作。但我的代码不能正常工作文本截断。

我不想设置宽度。我想制作灵活的模板，如果我设置宽度，那么它不会在小尺寸浏览器中使用

在此处输入图像描述 我不想溢出内容。

标签： htmlcss

解决方案

您需要设置包含溢出内容的 div 的宽度。否则截断类不会产生省略号。

试试这个代码：

<div style="display: flex; background-color: beige; font-size: 14px; width: 10%;">
    <!-- favorite-->
    <div>
        <img src="./images/ic-mentor.png" style="border-radius: 15px; border: 1px solid #dddddd; width: 75px; height: 75px;"/>
    </div>
    <div style="flex-grow: 1;">
        <div class="clearfix">
            <img src="./images/ic-mentor.png"/>
            <span>
                TEST_USER
            </span>
            <span>
                <!-- &nbsp;|&nbsp; -->
                <!-- Characters -->
                
            </span>
            <span style="float:right">
                PM 01:16
            </span>
        </div>
        <div class="text-truncate" style="width: 300px;">
            adssasdaasdsadsaasdadsadssdasdadsaadsadssadasasddassad
        </div>
    </div>
</div>

注意：我现在已经添加了内联样式。

推荐阅读