HTML / CSS "Отзывчивое усечение"

Question

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

Моя разметка представляет собой один неупорядоченный список ссылок (с длинными якорными текстами) - есть ли у кого-нибудь предложения по усечению якорного текста в соответствии с ширинойсодержащее подразделение?

Answer 1

Я могу предложить два варианта:

Один - сделать это самостоятельно, используя JavaScript, как описано здесь:

Рассчитать ширину текста с помощью JavaScript

Я не думаю, что есть какой-либо способ определить ширину текста, пока браузер фактически не отобразит текст.

Убедитесь, что вы не отображаете: ничего, или браузер на самом деле не будетвизуализируйте его, и вы не сможете определить ширину.

Второе - позволить CSS сделать это за вас;это проще, но вы теряете почти всю гибкость:

Если вы хотите, чтобы CSS угадал, как обрезать ваш текст в многоточие, вы можете попробовать переполнение текста: ellipsis

http://www.quirksmode.org/css/textoverflow.html