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

我 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 中的解决方案

Answer 2

我喜欢使用以下内容来完成截断文本。我也会使用@Michael提到的@media查询。

.ellipsis {
  overflow: hidden;
  white-space: nowrap; 
  text-overflow: ellipsis; 
}
.ellipsis:hover {
  overflow: auto;
  white-space: normal;
  text-overflow: unset;
}

<p style='width:150px; border:solid #000 1px;'>Here is some text with out the ellipsis so is not truncated.</p>
<p class='ellipsis' style='width:150px; border:solid #000 1px;'>Here is some text with the ellipsis and it is truncated.</p>

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

2 个答案: