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

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

目前，我的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}

{if$category->description}
{如果strlen（$category->description）>190}
{$category->description | truncate:190}
{$category->description}
{else}
{$category->description}

{/if}
{/if}

这种代码允许显示被截断为190个字符的文本，无论屏幕分辨率如何

我想做以下工作：

            {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}

• 在大屏幕上显示300个字符
• 在移动屏幕上显示100个字符

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

我试图找到css方法，如这里所述：

但使用上述方法时，文本始终限于一行。在大屏幕上，我想把文本分成几行

我提前感谢您的阅读和任何帮助

---

Patrick

ImCSS您可以使用：

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

文本和文本

---

要计数字符需要JS中的解决方案

ImCSS，您可以使用以下方法：

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

文本和文本

---

要计数字符需要JS中的解决方案

我喜欢使用以下方法来完成文本的截断。我还将使用@Michael提到的@media查询

。省略号{
溢出：隐藏；
空白：nowrap；
文本溢出：省略号；
}
.省略号：悬停{
溢出：自动；
空白：正常；
文本溢出：未设置；
}

这里有一些没有省略号的文本，因此不会被截断
这里是一些带有省略号的文本，它被截断了。

我喜欢使用以下方法来完成文本的截断。我还将使用@Michael提到的@media查询

。省略号{
溢出：隐藏；
空白：nowrap；
文本溢出：省略号；
}
.省略号：悬停{
溢出：自动；
空白：正常；
文本溢出：未设置；
}

这里有一些没有省略号的文本，因此不会被截断
这里有一些带省略号的文本，它被截断了。

这不能用

@media

来完成吗？非常感谢@hajile78。我在我的tpl文件中添加了

并在css文件中添加了推荐的代码。现在整个段落显示在大屏幕上，一行显示在小屏幕上（当鼠标在文本上时可以看到整个段落），这难道不能用

@媒体
来完成吗？非常感谢@hajile78。我在我的tpl文件中添加了
并在css文件中添加了推荐的代码。现在，整个段落显示在大屏幕上，一行显示在小屏幕上（当鼠标悬停在文本上时，可以看到整个段落）