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

Question

我有一个基于 wordpress 的网站，其中包含电影和内容的情节，我只想摘录情节，使它们看起来像“Word word word word...”，如果情节不适合容器。所以我想在 php 中没有办法知道文本是否适合容器，但我能做些什么来制作像我描述的那样的摘录？如果唯一的解决方案只是选择一些字符并将其设置为限制，我如何找到这个数字？提前致谢

Answer 1

在 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

Answer 2

您可以为此使用自动换行功能在给定 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 3

如果您愿意使用 CSS，您可以将内容/描述包装在 div 中，并具有以下属性：

.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;
}

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

神奇的发生是由于text-overflow。