Как уменьшить тексты, если они не помещаются в холдеры?

У меня есть адаптивные блоки (divs), содержащие динамические тексты. Тексты обычно достаточно короткие, чтобы поместиться в рамки, но иногда некоторые из них больше и не помещаются.

Я пытаюсь решить эту проблему, усекая тексты с text-overflow: ellipsis, но это не идеально, потому что информация теряется. Точки останова медиа-запросов тоже не помогают, потому что они влияют на всю страницу, а не только на поля с длинным текстом.

Как бы вы сделали неподходящий текст адаптивным, чтобы его размер автоматически уменьшался, чтобы поместиться в поле держателя?


html css responsive
person IsidroGH    schedule 17.03.2017    source источник
comment
Это невозможно только с помощью CSS. Вы можете использовать JavaScript, который проверяет ширину содержимого и уменьшает размер шрифта, пока он не подойдет, но это не идеально; во-первых, он не может уменьшить размер шрифта ниже минимального размера, установленного в настройках пользователя, а во-вторых, если минимальный набор не установлен, процедура может попытаться уменьшить его до нечитаемого 1 пикселя, если текст очень большой.   -  person Mr Lister    schedule 17.03.2017
comment
Поэтому вам следует искать обходной путь. Как насчет горизонтальной полосы прокрутки? Вертикальная полоса прокрутки?   -  person Mr Lister    schedule 17.03.2017
comment
Взгляните на этот ответ из другого похожего вопроса: stackoverflow.com/a/6112914/1129920 С небольшим количеством JS вы могут изменить размер текста до размера div.   -  person krisboud    schedule 17.03.2017
comment
Было бы лучше в качестве комментария. Публикуйте ответы только тогда, когда они могут напрямую помочь автору вопроса. Если вы собираетесь рекомендовать что-то без кода, делайте это в комментариях.   -  person Ousmane D.    schedule 17.03.2017
comment
Просто хотел убедиться, что это нельзя сделать только с помощью CSS. Я попробую подход JavaScript, хотя он кажется немного грязным. (я не могу использовать полосы прокрутки)   -  person IsidroGH    schedule 17.03.2017
comment
Я попробую это, хотя пытался избежать взломов JS.   -  person IsidroGH    schedule 17.03.2017

Ответы (3)


arrow_upward
1
arrow_downward

Я тоже хотел этого добиться, но нашел для этого только хороший работающий Js. Не могли бы вы взглянуть на него fittext.js

person Evrard-c    schedule 17.03.2017
comment
Fittext кажется хорошим для моих нужд. Я буду копаться в этом. - person IsidroGH; 17.03.2017

arrow_upward
0
arrow_downward

Если вы не задали высоту дивов, то текст внутри них будет только увеличивать размер дивов, но не будет выходить за их пределы.

если вы пытаетесь усечь, почему бы не использовать overflow: hidden.

В качестве альтернативы вы можете создать класс, ориентированный на элементы div, которые, как вы подозреваете, могут содержать длинный текст, и задать для них значение em в качестве размера. Вместо пикселей

person Dhananjay Gupta    schedule 17.03.2017
comment
Я стараюсь не урезать тексты. Тексты динамические, поэтому я не знаю, какой и когда div будет содержать длинный текст. - person IsidroGH; 17.03.2017

arrow_upward
-1
arrow_downward

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

.parent{
    width: 20%; 
    height: 20%;
}

.child{
   display: inline-block;
}
person san A    schedule 17.03.2017
comment
@MrLister, да, наверное, я был под кайфом, я думаю: / Отредактировал свой ответ. - person san A; 17.03.2017