Предельные символы, отображаемые в диапазоне

Есть ли какой-то способ в HTML или CSS для ограничения символов, отображаемых с помощью span? Я использую ретранслятор, который отображает эти информационные поля, и я хочу ограничить символы первыми 20 символами, и если у ввода больше, то просто конкатенация? Коробка похожа на показанное изображение:

Мой код для этого:

<span class="claimedRight" maxlength="20">{{ item.provider }}</span>

Ответ 1

Вот пример использования text-overflow:

.text {
  display: block;
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<span class="text">Hello world this is a long sentence</span>

Ответ 2

Вы можете использовать css ellipsis;, но вы должны указать фиксированную ширину и overflow:hidden: этому элементу.

<span style="display:block;text-overflow: ellipsis;width: 200px;overflow: hidden; white-space: nowrap;">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
	</span>

Ответ 3

max-length используется для элементов input. Используйте свойство text-overflow для CSS.

.claimedRight {
    display:block; width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Ответ 4

Да, вроде.

Вы можете явно отсортировать контейнер, используя единицы измерения относительно размера шрифта:

1em = 'горизонтальная ширина буквы m'
1ex = 'вертикальная высота буквы x'
1ch = 'горизонтальная ширина числа 0

Кроме того, вы можете использовать несколько свойств CSS, таких как overflow:hidden; white-space:nowrap; text-overflow:ellipsis;, чтобы также ограничить число.

Ответ 5

использовать js:

 $(document).ready(function ()
   { $(".class-span").each(function(i){
        var len=$(this).text().trim().length;
        if(len>100)
        {
            $(this).text($(this).text().substr(0,100)+'...');
        }
    });
 });