1

Использую везде один и тот же миксин для обрезки текста

@mixin text-clamp($lines) {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
}

Но вот решили подключить новый шрифт M Plus 1p https://fonts.google.com/specimen/M+PLUS+1p?selection.family=M+PLUS+1p

С этим шрифтом расположение многоточия не на baseline (визуально).

Подскажите, плз, как быть.

Пример:

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

.regular-font {
  font-family: sans-serif;
}

.spec-font {
  font-family: 'M PLUS 1p';
}
<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p&display=swap" rel="stylesheet">

<p class="clamp-container spec-font">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies magna turpis, eget placerat lectus tempus finibus. Donec facilisis tristique est. Nunc maximus, lectus nec pretium cursus, ex enim imperdiet metus, nec iaculis mauris metus
  eu neque. Sed bibendum, felis non convallis condimentum, sem enim iaculis leo, nec finibus arcu metus ac arcu.</p>

<p class="clamp-container regular-font">Идейные соображения высшего порядка, а также реализация намеченных плановых заданий позволяет оценить значение системы обучения кадров, соответствует насущным потребностям. Идейные соображения высшего порядка, а также постоянное информационно-пропагандистское
  обеспечение нашей деятельности представляет собой интересный эксперимент проверки системы обучения кадров, соответствует насущным потребностям. Не следует, однако забывать, что сложившаяся структура организации позволяет выполнять важные задания по
  разработке систем массового участия.</p>

UPD.1. Картинка. Вверху проблемный шрифт, внизу обычный введите сюда описание изображения

6
  • А можно картинку?
    – Alexey Ten
    14 авг 2019 в 11:31
  • @AlexeyTen, добавил
    – Skywave
    14 авг 2019 в 11:54
  • У вас не M+1p на картинке. Видимо в загруженном шрифте нет кириллицы. Проверьте на английском тексте.
    – Alexey Ten
    14 авг 2019 в 11:56
  • @AlexeyTen, сделал пример латиницы
    – Skywave
    15 авг 2019 в 4:35
  • @StrangerintheQ, Добавил в сниппет - не помогло
    – Skywave
    15 авг 2019 в 5:27

2 ответа 2

1

Есть свойство text-overflow: ellipsis;, оно делает однострочную обрезку с многоточием в конце.

Необходимо добавить эти 3 значения:

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Результат:

введите сюда описание изображения

.clamp-container {
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.regular-font {
  font-family: sans-serif;
}

.spec-font {
  font-family: 'M PLUS 1p';
}
<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p&display=swap" rel="stylesheet">

<p class="clamp-container spec-font">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies magna turpis, eget placerat lectus tempus finibus. Donec facilisis tristique est. Nunc maximus, lectus nec pretium cursus, ex enim imperdiet metus, nec iaculis mauris metus
  eu neque. Sed bibendum, felis non convallis condimentum, sem enim iaculis leo, nec finibus arcu metus ac arcu.</p>

<p class="clamp-container regular-font">Идейные соображения высшего порядка, а также реализация намеченных плановых заданий позволяет оценить значение системы обучения кадров, соответствует насущным потребностям. Идейные соображения высшего порядка, а также постоянное информационно-пропагандистское
  обеспечение нашей деятельности представляет собой интересный эксперимент проверки системы обучения кадров, соответствует насущным потребностям. Не следует, однако забывать, что сложившаяся структура организации позволяет выполнять важные задания по
  разработке систем массового участия.</p>

3
  • а в 2 строки? =)
    – Skywave
    15 авг 2019 в 5:35
  • @Skywave я написал что это немного не то =), это демонстрация что механизм явно другой 15 авг 2019 в 5:36
  • ну, по крайней мере для однострочных будем это использовать пока, спасибо)
    – Skywave
    15 авг 2019 в 5:37
1

Тут проблема в вашем шрифте. Если вы явно вставите в текст символ многоточия (код &#8230; или &#x2026;), то увидите, что оно попросту выше чем нужно - косяк разработчика шрифта либо дизайнерская хитрая задумка.

1
  • Попробовал, увидел, спасибо
    – Skywave
    19 авг 2019 в 4:24

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.