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

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

Данная строка:

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

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

Some really long string...

Ответы

Ответ 1

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

Просто с некоторыми 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

Ответ 3

У меня была аналогичная проблема, так как я решил, что она должна свести строку до 60 символов и добавить "..." до конца.

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

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

{$my_string|truncate:60}

Ответ 4

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

function truncate_text($string, $min_chars, $append = ' &hellip;') {
    $chars = strpos($string, " ", $min_chars);
    $truncated_string = substr($string, 0, $chars) . $append;
    return $truncated_rstring;
}

Ответ 5

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

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

Сначала подготовьте свою надбавку:
```
<p id="abc">{TEXT}</p>
```
Где {TEXT} - ваш текст усечен до 150 символов + ...

Теперь, когда у нас есть хорошая база для 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>