Советы! Исследование функции переполнения и пропусков блочного текста CSS

Сегодняшняя статья очень интересная, я расскажу о некоторых интересных деталях всего блока переполнения текста и опускаю точки.

Большой текст

Мы все знаем, что на сегодняшний день (06.03.2020) CSS предоставляет два способа облегчить нам удаление сверхдлинного текста.

заоднострочный текст, используйте пропуск одной строки:

{
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

И длямногострочный текстСупер длинный опущен, используйте-webkit-line-clampРодственные свойства, совместимость тоже очень хорошая:

{
    width: 200px;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

CodePen Demo -- встроенный блок реализует управление переполнением всего блока

Проблема 1: пропущен весь блок сверхдлинного текста

В связи с вышеупомянутой схемой пропуска сверхдлинных точек требования будут меняться. Например, у нас есть следующая структура:

<section>
    <a href="/" class="avatar"></a>
    <div class="info">
        <p class="person-card__name">Sb Coco</p>
        <p class="person-card__desc">
            <span>FE</span>
            <span>UI</span>
            <span>UX Designer</span>
            <span>前端工程师</span>
        </p>
    </div>
</section>

Для случая с превышением мы хотим, чтобы весь блок превышал длину текста --Фронтенд-инженер, целое опущено.

Если мы воспользуемся приведенной выше схемой напрямую со следующим CSS, результат будет таким, а не ожидаемым пропущенным блоком:

.person-card__desc {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

будет`display: inline`изменить на`display: inline-block`Реализовать пропуск блока

Здесь, если нам нужно реализовать блок пропусков, нам нужно только обернуть весь блок элементов меткиspanизdisplayЗависит отinlineизменить наinline-blockВот и все.

.person-card__desc span {
    display: inline-block;
}

Таким образом, можно добиться того, что переполнение, основанное на содержимом всего блока, будет исключено. Для полной демонстрации вы можете нажать здесь:

Демонстрация CodePen — недопустимо большое переполнение во всем блоке

Вопрос 2: iOS не поддерживает пропуск всего блока сверхдлинного переполнения

Однако приведенная выше схема не идеальна. После тестирования приведенная выше схемаiOSиSafari, он не вступил в силу, и это было показано следующим образом:

Посмотреть спецификацию -CSS Basic User Interface Module Level 3 - text-overflow, причина в том, чтоtext-overflowПропустить точку можно только на встроенных элементах. (Chrome может сделать некоторые оптимизации для этого, поэтому приведенные выше сценарии, отличные от iOS и Safari, являются нормальными)

Так что думаю, это потому, что послеdisplay: inline-blockПосле преобразования он больше не является строго встроенным элементом.

Решение: используйте многострочное исключение вместо однострочного.

Конечно, после проведенного здесь эксперимента мы обнаружили, что решение все же есть.Также мы упоминали в начале схему многострочного пропуска.Мы заменяем многострочный опущенный код на однострочный пропуск,только количество строк-webkit-line-clamp: 2Изменить его на одну строку-webkit-line-clamp: 1.

.person-card__desc {
    width: 200px;
    white-space: normal;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.person-card__desc span {
    display: inline-block;
}

Таким образом, весь блок сверхдлинных точек можно полностью опустить в iOS/Safari:

Демонстрация CodePen — схема пропуска для переполнения всего блока под iOS

Стоит отметить, что при использовании -webkit-line-clampплан, должны сотрудничать сwhite-space: normalДопускается перенос строк, а не перенос строк. этот момент очень важен.

Таким образом, мы достигли полностью совместимого целого блока сверхдлинных точек, опущенных.

Конечно, -webkit-line-clampСуществуют также некоторые проблемы совместимости сами по себе, и при их фактическом использовании необходимы определенные компромиссы.

Наконец

Ну вот и конец этой статьи, простой CSS трюк, надеюсь он вам поможет :)

Если вы хотите получить самую интересную информацию о CSS, не пропустите мой официальный аккаунт --Интересные факты о внешнем интерфейсе iCSS😄

Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.