Как указать длинный текст в меньшем фиксированном столбце с помощью CSS? - PullRequest
Новая
       8

Как указать длинный текст в меньшем фиксированном столбце с помощью CSS?

29 голосов
/ 21 января 2010

Как разместить длинный текст в столбце с фиксированной шириной, где у меня есть место только для одной строки текста? Текст должен быть обрезан до фиксированной ширины (скажем, до 100px) , и я хотел бы добавить точки "..." в конце. Примерно так, например:

Заданная строка: 

Some really long string that I need to fit in there!

Желаемый результат в столбце фиксированной ширины должен быть: 

Some really long string...

Ответы [ 5 ]

73 голосов
/ 21 января 2010

Вы можете сделать это только с помощью 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 */
}

Примечание. Вы захотите проверить последнюю версию браузера.

2 голосов
/ 04 сентября 2014

Просто с помощью CSS-подобного ответа Гордона. Просто добавили свойство display:block для встроенного элемента, такого как <a> или <p>: 

a#myText{
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 300px;
}

Вы можете использовать его со многими браузерами, как вы можете видеть по этой ссылке: http://caniuse.com/#search=text-overflow

0 голосов
/ 21 января 2010

Вот функция, которую я использую для усечения строк. Как и большинство предложений здесь, он использует substr для усечения строки, но он не будет разбивать строку слова на середину: 

function truncate_text($string, $min_chars, $append = ' &hellip;') {
    $chars = strpos($string, " ", $min_chars);
    $truncated_string = substr($string, 0, $chars) . $append;
    return $truncated_rstring;
}
0 голосов
/ 21 января 2010

Я думаю, что простое вырезание текста после N символов не то, что вы ищете. Это не решение, потому что следующий текст имеет длину 15 символов: iiiiiiiiiiiiiii, ммммммммммммммм - обратите внимание, что второе «слово» примерно в три раза длиннее первого.

JavaScript может быть решением:

  1. Сначала подготовьте наценку: 

    <p id="abc">{TEXT}</p>

    Где {TEXT} - ваш текст урезан до 150 символов + ...

  2. Теперь, когда у нас есть хорошая база для JavaScript, мы можем попытаться сделать то, что вы ищете: 

    <html>
<head> 
    <style type="text/css">
        #abc {
            width: 100px;
        }
    </style>
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function() {
            var ref  = document.getElementById("abc");
            var text = ref.text;

            ref.removeChild(ref.firstChild);
            ref.appendChild(document.createTextNode("..."));

            var maxHeight = ref.offsetHeight;

            var pos = 0;
            while (ref.offsetHeight <= maxHeight) {
                var insert = text.substring(0, ++pos) + "...";

                var finalReplace = ref.replaceChild(document.createTextNode(insert), ref.firstChild);
            }

            ref.replaceChild(finalReplace, ref.firstChild);
        }, false);
    </script>
</head>
<body>
    <p id="abc">My very, very, very, very, very, very, very long text...</p>
</body>
</html>
0 голосов
/ 21 января 2010

У меня была похожая проблема, я решил ее, урезав строку до 60 символов и добавив в конце символ «...».

Уродливое решение? Да, но если нет решения jQuery, это, вероятно, ваш лучший выбор.

Если вы используете Smarty, вот как я решил проблему: 

{$my_string|truncate:60}
...