Как реализовать 2 строки и ширину для размещения в столбце в веб-разработке?

Question

<td style="width:230px;overflow:hidden;">
<?php echo $something; ?>
</td>

То, что я делаю, это обрезает $something максимум до 2 строк и добавляет ... при необходимости

но такого рода требования кажутся менее значимыми при реализации,

Решения в рамках php / javascript / css приветствуются!

У кого-нибудь есть идеи?

Answer 1

Как сказал эйканал, вы не можете точно предсказать пользовательские настройки пользователя. Единственное, что вы можете сделать, - это измерить элемент, имеющий две строки текста (поместить небольшое количество текста в элемент [n-off-screen] div без заполнения, и измерить высота), и установите переполнение скрытым.

Есть несколько трюков, которые вы могли бы сделать, чтобы получить многоточие, но я бы абсолютно не рекомендовал. Вы можете установить абсолютное положение div внутри родительского элемента (с относительным позиционированием) и установить для него значение bottom: 0, right: 0 с тем же цветом фона, что и у родительского элемента, таким образом перекрывая последний бит текста в элементе.

<style type="text/css">
#parent {
  position:relative;
  overflow: hidden;
  width: 230px;
  height: auto;
  background: #f1f1f1;
}
.ellipsis {
  position: absolute;
  right: 0;
  bottom: 0;
  background: #f1f1f1;
}
</style>

<div id="parent">
  This would be the text that was inserted by the PHP code you mentioned above
  <div class="ellipsis">...</div>
</div>

Затем, чтобы Javascript получил высоту, примите это за псевдокод ...

<script type="text/javascript">
window.onload = function() {
  var textDiv = document.createElement('div');
  textDiv.style = 'padding:0;position:absolute;left:-500px;top:-500px;';
  textDiv.innerHTML = 'Getting<br>Height';
  document.body.appendChild(textDiv);

  var textHeight = (textDiv.offsetHeight || textDiv.clientHeight);
  document.body.removeChild(textDiv);

  document.getElementById('parent').style.height = textHeight;
}
</script>

Конечно, если вы используете инфраструктуру Javascript (Mootools, jQuery), вы можете изменить способ создания элемента и задать атрибуты, но это должно, по большей части, достичь чего-то очень близкого к тому, что вы ищете, с минимальные ковыряния.

Вы также хотели бы установить высоту всех элементов с классом многоточия равной половине высоты, полученной из JavaScript.

Это все, что я получил, чувак. Надеюсь, поможет. : -)

Answer 2

Я думаю, что у вас длинная проблема с текстом. Для этого используйте функцию wordwrap,

Пример для руководства:

<?php
$text = "A very long woooooooooooord.";
$newtext = wordwrap($text, 8, "\n", 1);

echo "$newtext\n";
?> 

Выход:

     1. A very
        long
        wooooooo
        ooooord.

Answer 3

Я думаю, вам нужно сделать это в JavaScript, потому что вы зависите от окончательного рендеринга в браузере, используемого CSS и т. Д.

Этот вопрос описывает, как найти длину строки при ее отображении. Вы знаете ширину своего столбца, поэтому, я полагаю, вы можете определить количество символов в тексте, которое заполнит две строки.

Или приблизительно, вычислите число самых широких символов, которые будут соответствовать MMMMMMM, и просто возьмите столько символов.

Или в скрытом окне создайте таблицу подходящего размера, продолжайте добавлять к ней символы, пока высота строки не станет слишком большой

Answer 4

Я не уверен в строковых методах php, но вы можете проверить метод усечения. попробуйте найти максимальное количество символов для ячейки таблицы, а затем используйте этот вызов $thing.truncate ($ max_num_of_table_cell)