WordPress — Уменьшение длины текста в зависимости от размера контейнера
У меня есть WordPress веб-сайт с графиками фильмов и прочего, и я просто хотел бы сделать отрывки из графиков, чтобы они выглядели как «Слово слово слово слово …» с точками в конце, если сюжет не ‘ не подходит для контейнера. Так что я думаю, что в php нет способа узнать, поместится ли текст в контейнере или нет, но что я могу сделать, чтобы сделать какую-то выдержку, подобную описанной мной? Если единственное решение — просто выбрать число символов и установить его как ограничение, как мне найти это число? заранее спасибо
Решение
в 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>
Вы можете увидеть разницу между ними.
увидеть демонстрация Вот
Другие решения
Для этого вы можете использовать функцию wordwrap, которая автоматически вставляет новую строку в строку заданного значения.
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');
Если вы открыты для использования 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>