css - 如何根据屏幕分辨率截断文本

Question

我想根据屏幕分辨率截断文本。

目前我的 tpl 文件中的代码如下:

            {if $category->description}
            <div class="cat_desc">
            {if strlen($category->description) > 190}
                <p id="category_description_short">{$category->description|truncate:190}</p>
                <p id="category_description_full" style="display:none">{$category->description}</p>
                <a href="#" onclick="$('#category_description_short').hide(); $('#category_description_full').show(); $(this).hide(); return false;" class="lnk_more">{l s='More'}</a>
            {else}
                <p>{$category->description}</p>
            {/if}
            </div>
        {/if}

无论屏幕分辨率如何，此类代码都允许显示截断为 190 个字符的文本。

我想做以下事情:

• 在大屏幕上显示 300 个字符
• 在手机屏幕上显示 100 个字符

你知道如何实现这个目标吗。

我试图找到像这里描述的那样的 css 方式: https://css-tricks.com/flexbox-truncated-text/

但是使用上面的方法，文本总是被限制在一行。在大屏幕上，我希望文本分几行。

预先感谢您的阅读和任何帮助。

帕特里克

Answer 1

Im CSS 您可以使用例如:

// large screen
.textbox { 
    max-width: 600px; 
    word-wrap:break-word; 
}

// override when smaller screen
@media only screen and (max-width: 500px) {
    .textbox { 
        max-width: 300px; 
        word-wrap:break-word; 
    }
}

HTML

<p class="textbox">Text and text and text</p>

要计算字符数，需要JS解决方案