Как указать длинный текст в меньшем фиксированном столбце с помощью CSS?
Если вы действительно заинтересованы в хорошем, углубленном объяснении семантики перемещения, я настоятельно рекомендую прочитать оригинальную бумагу на них, «Предложение о добавлении поддержки семантики перемещения на язык C ++».
Он очень доступен и легко читается, и он отлично подходит для преимуществ, которые они предлагают. Существуют и другие более свежие и обновленные документы о семантике перемещения, доступные на веб-сайте WG21 , но этот, пожалуй, самый простой, поскольку он приближается к вещам с верхнего уровня и не очень [подробно]
4 ответа
Вы можете сделать это с CSS в одиночку:
.box {
-o-text-overflow: ellipsis; /* Opera */
text-overflow: ellipsis; /* IE, Safari (WebKit) */
overflow:hidden; /* don't show excess chars */
white-space:nowrap; /* force single line */
width: 300px; /* fixed width */
}
Примечание. Вы захотите проверить новейшую поддержку браузера.
Вот функция, которую я использую для усечения строк. Как и большинство предложений здесь, он использует Substr для усечения строки, но это позволяет избежать разделения строки среднего слова:
function truncate_text($string, $min_chars, $append = ' …') {
$chars = strpos($string, " ", $min_chars);
$truncated_string = substr($string, 0, $chars) . $append;
return $truncated_rstring;
}
Я думаю, что простой текст резки после n символов не то, что вы ищете. Это не решение, потому что следующий текст имеет как 15 длиной символов: IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII-мммММММММ - обратите внимание, что второе «слово» примерно в три раза больше, чем первый.
JavaScript может быть решением:
Сначала подготовим свою маркировку:
{Text}
Где
{Text}- ваш текст усечен до 150 символов +...Теперь, когда у нас есть хорошая база для JavaScript, мы можем попытаться сделать то, что вы ИЩУ:
<Тип стиля = "Текст / CSS"> #abc { Ширина: 100px; } <Тип сценария = "Текст / javascript"> document.addeventListener ("Domcontentloaded", функция () { var ref = document.getelementbyId («ABC»); var text = ref.text; Ref.removechild (Ref.FirstChild); Ref.appendChild (Document.createTextnode («...»)); var maxheight = ref.offsetheight; var pos = 0; Пока (Ref.offsetheight <= maxheight) { var insert = text.substring (0, ++ pos) + "..."; var finalreplace = ref.replacechild (document.createTextnode (вставка), ref.firstChild); } Ref.replacechild (Finalreplace, Ref.FirstChild); }, ложный); .Мой очень, очень, очень, очень, очень, очень, очень длинный текст ...
У меня была похожая проблема, то, как я решил, что он должен был распределить нить до 60 символов и добавить «...» до конца этого.
Уродливый раствор? Да, но если нет решения jQuery, это, вероятно, ваша лучшая ставка.
Если вы используете Smarty, вот как я решил проблему:
{$my_string|truncate:60}