Текст привилегии в 1000 реп. выходит за границы блока:
Можно наблюдать по ссылке.
На странице профиля пользователя на вкладке «Активность» в блоке «След. привилегия» происходит переполнение текста.
Изменить следующие стили (/* + */ — что было добавлено)
.s-progress-bar._privilege .-info .-icon {
margin-right: 4px;
width: 14px;
color: #6a737c;
margin-left: 4px; /* + */
}
.s-progress-bar._privilege .-info .-label {
margin-left: 2px;
white-space: nowrap; /* + */
overflow: hidden; /* + */
text-overflow: ellipsis; /* + */
display: inline-block; /* + */
}
Не забыть к span
добавить title
. Чтобы при наведении можно было прочитать полностью статус.
<span class="g-col fl-none -label" title="Просмотр голосов, карточка участника, которую можно расширить">Просмотр голосов, карточка участника, которую можно расширить</span>
Видимо, проблему снова нужно решать более коротким переводом, т.к. на enSO исходный текст помещается:
Я, правда, не помню, что там было раньше. Или проблема была всегда? Сейчас, насколько я знаю, происходит переделка по дизайну профиля.
Если определиться с переводом, то проблему дизайна будет легко решить.
line-height: 1;
и упихать перевод в 2 строки. А центрирование там нормально сделано, вроде.
overflow:hidden
с плавным градиентом в цвет фона.
Commented
2 июл. 2017 в 13:53
дизайн
. Потому что вопрос касается верстки. У меня нет права на редактировние вопроса. Решение привел ниже в ответе.