Question

我有一个基于wordpress的网站，上面有各种各样的电影和内容，我只想摘录一下这些情节，以便他们看起来就像＃34;单词单词...＆＃34;如果情节不适合容器，最后用圆点。所以我想在php中没有一种方法可以知道文本是否适合容器，但是我能做些什么样的摘录就像我描述的那样？如果唯一的解决方案只是选择多个字符并将其设置为限制，我该如何找到这个数字？提前致谢

Answer 1

你可以使用wordwrap函数自动在给定lentgh的字符串中插入新行..

http://php.net/manual/en/function.wordwrap.php

<?php
$text = "The quick brown fox jumped over the lazy dog.";
$newtext = wordwrap($text, 20, "<br />\n");

echo $newtext;
?>

<强>输出

The quick brown fox<br />
jumped over the lazy<br />
dog.

如果你想更动态地做它，根据它的容器宽度包装它..你可以用 JS

来做

function wordwrap(str, int_width, str_break, cut) {
  var m = ((arguments.length >= 2) ? arguments[1] : 75);
  var b = ((arguments.length >= 3) ? arguments[2] : '\n');
  var c = ((arguments.length >= 4) ? arguments[3] : false);

  var i, j, l, s, r;

  str += '';

  if (m < 1) {
    return str;
  }

  for (i = -1, l = (r = str.split(/\r\n|\n|\r/))
    .length; ++i < l; r[i] += s) {
    for (s = r[i], r[i] = ''; s.length > m; r[i] += s.slice(0, j) + ((s = s.slice(j))
      .length ? b : '')) {
      j = c == 2 || (j = s.slice(0, m + 1)
        .match(/\S*(\s)?$/))[1] ? m : j.input.length - j[0].length || c == 1 && m || j.input.length + (j = s.slice(
          m)
        .match(/^\S*/))[0].length;
    }
  }

  return r.join('\n');
}

现在将其称为

var container_width=20; // your div or container width
wordwrap('The quick brown fox jumped over the lazy dog.', container_width, '<br />\n');

Answer 2

如果您打开使用CSS，则可以使用以下属性将内容/说明包装在div中：

＆＃13;

.desc {
  display: -webkit-box;
  max-width: 400px;
  height: 109.2px;
  border: 1px red dashed;
  margin: 0 auto;
  margin-top: 1em;
  font-size: 26px;
  line-height: 1.4;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: .2em;
}

＆＃13;

<div class="desc">Movie description follows here in the box containing a lot of text. This will be clipped. Movie description follows here in the box containing a lot of text. This will be clipped.</div>
<div class="desc">This will fit</div>

＆＃13;

魔法发生在text-overflow。

Answer 3

在css中，您拥有text-overflow: eclipse

的属性

所以你可以用它。

<style>
#div1 {
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden;
    text-overflow: clip; 
    border: 1px solid #000000;
}

#div2 {
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden;
    text-overflow: ellipsis; 
    border: 1px solid #000000;
}
</style>


<p>This div uses "text-overflow:clip":</p>
<div id="div1">This is some long text that will not fit in the box</div>

<p>This div uses "text-overflow:ellipsis":</p>
<div id="div2">This is some long text that will not fit in the box</div>

你可以看到两者之间的区别。请参见demo此处

Php - 根据容器大小减少文本长度

3 个答案: