限制 div 中的单词数

Question

是否有css属性可以限制div中显示的字符数。例如

<div class ="main-text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

但我只需要显示

<div class ="main-text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>

我正在使用具有推荐功能的 wordpress 网站。因此，如果任何客户添加了推荐，我只需要显示链接的前几个字。请帮忙！！谢谢！！

Answer 1

你可以玩的一个overflow特性（实际上有他们夫妇-overflow-x, overflow-y和overflow），你也必须设置width绝对单位（读像素或EM，但不是以百分比计算）你的div。

例如（CSS）：

div.main-text {overflow-x: hidden;width: 200px;} 
/*This will hide everything, which goes outside of the 200px div*/

您也可以使用简单的 PHP 代码限制文本：

if (!function_exists('chop_string')) {
function chop_string($str, $len) {
    if (strlen($str) < $len)
        return $str;

    $str = substr($str,0,$len);
    if ($spc_pos = strrpos($str," "))
            $str = substr($str,0,$spc_pos);

    return $str . "Read more...";
}   
}

将上述函数放在你的 Wordpress 主题functions.php文件中，并像这样使用它：

<?php echo chop_string('Bla bla bla', 5); ?>

上面的代码将只显示字符串中的 5 个字符和Read more....

编辑：

如果您想剪切来自 Wordpress 的标题或生成的内容，那么您必须编辑您的page.php文件（也是archive.php文件），它们位于您的模板目录中。在这些文件中找到以下代码：the_content()和the_title()，这两个函数实际上显示了数据库中的所有信息。

所以像这样切割它们： <?php echo chop_string(the_title(), 5); ?>或 <?php echo chop_string(the_content(), 5); ?>

Answer 2

有两种方法可以实现此目的：

1）CSS方式

添加 css 属性text-overflow:ellipsis

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

2）Trick方式（HTML）

添加一个文本区域控件或任何您需要的内容，使用cssdiv and add **maxlength=50**属性隐藏边框。 border:none