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

I have a wordpress based website with plots of movies and stuff, and I'd just like to make excerpts of the plots so that they look like "Word word word word..." with the dots in the end if the plot doesn't fit the container. So I guess there isn't a way in php to know if the text will fit or not in the container, but what can I do to make some kind of excerpt like the one I described? If the only solution is just choosing a number of chars and set that as a limit, how do I find this number? Thanks in advance

in css you have a property for text-overflow: eclipse

So you can use that for this.

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

you can see the difference between both. see demo here

You can use wordwrap function for this which automatically insert new line in string of given 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 />
");

echo $newtext;
?>

OUTPUT

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

If you want to do it more dynamically that is wrap it depending its container width .. you can do it with JS

function wordwrap(str, int_width, str_break, cut) {
  var m = ((arguments.length >= 2) ? arguments[1] : 75);
  var b = ((arguments.length >= 3) ? arguments[2] : '
');
  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(/
|
|/))
    .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('
');
}

Now call it as

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

If you're open to using CSS, you can wrap the content/description in a div, with the following properties:

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

The magic happens due to the text-overflow.

</div>