限制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 （读取div的像素或em，但不的百分比）。

例如（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

您可以使用css省略号。只需在文本溢出时使用它。它会截断适应你盒子的宽度。

http://davidwalsh.name/css-ellipsis

http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

.main-text {
  width: 250px;

}

.main-text p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
}

一个限制是您只能使用一行。

Answer 3

有两种方法可以实现这一目标：

1） CSS方式

添加css属性 text-overflow：省略号

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

2）欺骗方式（HTML）

在div and add **maxlength=50**或您需要的任何内容中添加 textarea 控件，使用 css border:none属性隐藏边框。

Answer 4

不，CSS是表现性的，因此不涉及特定内容的长度。它可以使用overflow和text-overflow属性剪切表示属性，例如框大小，但不能基于内容。您可以在服务器端轻松修复它：

$text = strlen($text) > 250 ? substr($text, 0, 250).'…' : $text;
echo "<p>$text</p>";

如果文本长于250个字符，则会插入省略号。

Answer 5

借助CSS3属性＆＃34;文本溢出＆＃34; - 您可以设置框宽度，从而得到所有div的精确宽度;

文字不会在单词的中间被删除，它会添加＆＃34; ...＆＃34;在文本的最后，暗示它是预览文本;

HTML代码：

<div id="myDiv">Just some text - you won't see ME!</div>

CSS代码：

#myDiv {
    background: red;
    color: white;
    font-size: 20px;
    height: 50px;
    overflow: hidden;
    width: 256px;
    white-space:nowrap;
    text-overflow: ellipsis;
}

在FF，Chrome，IE11下测试

Answer 6

这是我的解决方案演示：limit-printed-words.html

适用于任何嵌套级别甚至按钮内容。

---

---

来源项目：scriptbucket