Как отображать только часть строки с помощью css

Я хочу иметь возможность отображать строку символов до 10 символов. Если строка содержит более 10 символов, я хотел бы добавить "..." до конца.

Например, если у меня есть строка:

'helloworldmynameisryan'

Я хочу, чтобы он отображался следующим образом:

'helloworld...'

Я просто показываю свою строку в div следующим образом:

<div>DisplayMessage</div>

Есть ли класс, который я мог бы создать, который применим только в том случае, если строка была более 10 char?

Ответ 1

К сожалению, нет хорошего способа перекрестного браузера, используя только CSS. "text-overflow" полагается на ширину строки, а не на длину строки по мере необходимости.

Вы можете использовать свойство .length строк в javascript для достижения этого

function ellipsify (str) {
    if (str.length > 10) {
        return (str.substring(0, 10) + "...");
    }
    else {
        return str;
    }
}

Надеюсь, что это поможет.

Ответ 2

Firefox фактически поддерживает это, вам просто нужно убедиться, что все, что вы пытаетесь "обрезать", имеет форматирование уровня блока и ширину, которая может быть родительской.

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display:block;
    width : 100px; /* this could be defined on any parent */
}

Ответ 3

Без использования serverside script или javascript вы не сможете этого сделать.

Используйте функцию ниже.

function LimitCharacter($data,$limit = 20)
{
    if (strlen($data) > $limit)
    {
        $data = substr($data, 0, strrpos(substr($data, 0, $limit), ' ')) . '...';
        return $data;
    }
    else
    {
        return $data;
    }
}

назовите его LimitCharacter($yourString,5);

Javascript

var str = 'Some very long string';
if(str.length > 10) str = str.substring(0,10)+"...";

CSS

.limtiCharClass {
    -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 */
}

Ответ 4

он называется многоточием, и вы можете использовать его на блочном элементе.

Однако он не работает в Firefox, и вы не можете установить ширину точно в 10 символов, поскольку вы не можете указать ширину в символах в css.

Если вам нужно ровно 10 символов и совместимость с Firefox, вам придется использовать javascript или серверное решение.

проверить эллипсис: http://www.quirksmode.org/css/textoverflow.html

или попробуйте следующее:

.ellipsis{
 white-space:nowrap;
 overflow:hidden;
}

.ellipsis:after{
  content:'...';
}

Плагин jQuery для этого:

http://devongovett.wordpress.com/2009/04/06/text-overflow-ellipsis-for-firefox-via-jquery/

Ответ 5

Эллипсы - это функция css3, и при тестировании в разных браузерах возникают проблемы. Быстро обойти это было бы определить конкретный с помощью div или span с переполнением скрытый, а затем добавить фоновое изображение, которое говорит "..."

Ответ 6

Лучший способ это использовать:

text-overflow: ellipsis;

в вашем CSS

Это ограничит ваш текст шириной контейнера. Если текст превышает ширину, он будет отображаться с многоточием (...).

Это может помочь: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

Ответ 7

В соответствии с quirksmode, если есть длинный текст, например

 <div>11111111111111111111111111111111111111111111111111111111</div>

Чтобы обернуть это, у вас есть много способов, используйте тег <wbr>, как показано ниже

 <div>111111111111111111111111111<wbr>11111111111111111111111111111</div>

Он будет отображаться как 1111111111111111111111 1111111111111111111111 или используйте  вместо, вывод будет

 111111111111111111111-
 1111111111111111111111

Или, если вы ищете решение JS, используйте this.