Метод обработки многострочного текста плюс многоточие

внешний интерфейс JavaScript CSS Webkit

Причина написания данной статьи заключается в том, что при использовании стилей для достижения эффекта многострочного текста помимо отображения многоточия обнаруживается, что многоточие на некоторых страницах находится не в конце текста, а в середине текст. Позже я проверил, что это было связано с текстом, отображаемым в ссылке. Ниже приводится подробное описание.

Лишняя часть текста на странице изображается многоточием, этого можно добиться разными способами, например, использовать JS для расчета количества слов или ширины, а если количество слов превышает указанную длину, обрезать текст. текст и используйте '...' для его соединения. Например, вы можете использовать стиль, чтобы просто контролировать следующее. Представьте метод, которого можно достичь с помощью стиля. Следующие методы в основном совместимы с мобильными и обычными браузерами на ПК.

1. Одна строка текста превышает...

css-код:

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

html-код:

<p class="text">我是单行我是单行文本我是单行文本我是单行文本我是单行文本我是单行文本文本</p>

2. Многострочный текст превышает...

Код CSS: (реализовано с использованием устаревших частных свойств webkit, доступно на мобильных устройствах)

.text2{
    display:-webkit-box; display:-webkit-flex; display:-ms-flexbox;
    -webkit-box-orient:vertical; box-orient: vertical;
    -webkit-line-clamp:2; line-clamp: 2;    //显示的行数
    overflow:hidden;
    text-overflow:ellipsis;
}

html-код:

<p class="text2">我是多行文本我是多行文本我是多行文本我是多行文本我是多行文本我是多行文本我是多行文本我是多行文本我是多行文本我是多行文本我是多行文本我是多行文本</p>

3. Использование многострочного многоточия в ссылке указывает на ошибку

Явление заключается в том, что многоточие отображается не в конце статьи, а в середине статьи, что является ошибкой, упомянутой в начале статьи. Это явление происходит на мобильном терминале, а на стороне ПК оно было протестировано и может отображаться нормально. Может быть связано с ядром браузера.

Решение: текст, который нуждается в многоточии, не заключен непосредственно в тег. Или вложите другой уровень в тег a.

Например:

<a href=""><span>我是多行文本我是多行文本我是多行文本我是多行文本</span></a>
Категории