Как отформатировать длинный <pre> блок HTML, подходящий для устройств с ограниченным ограничением, таких как iPhone

У меня длинный предварительный блок, я хочу, чтобы он отображался в мобильных браузерах, таких как iPhone

например

a very long pre block start here here here here here here here here here here 2nd line with intent 3rd line with intent 

Как сделать словосочетание, но сохранить отступы?

 eg a very long pre block start here here here here here here here here here here 2nd line with intent 3rd line with intent 

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

Самый похожий метод, который я пытался использовать, – использовать CSS

  pre { white-space: pre-line; } 

Но не так, как я хочу, как показано выше.

Обновлено: Ссылка: http://pastehtml.com/view/bisxytioa.html

Вот способ сделать это с помощью Javascript. Это проходит через <pre> и обертывает каждый раздел в <div> с padding-left равным количеству пробелов в отступе. В демонстрации я сделал размер <pre> размера экрана iPhone, чтобы продемонстрировать упаковку.

Демоверсия: jsFiddle

Автор сценария:

 var pre = document.getElementById( 'pre' ), sections = pre.textContent.trim().split( '\n' ), paddingPerChar = 9; for( var index=0, html='', padding=0; index < sections.length; index++ ) { padding = ( sections[index].length - sections[index].trim().length ) * paddingPerChar; html += '<div style="padding-left:' + padding + 'px;">' + sections[index].trim() + '</div>'; }; pre.innerHTML = html; 

HTML:

 <pre id="pre"> 1. a very long pre block start here here here here here here here here here here A. 2nd line with indent long pre block start here here here here here here here here here a. 3rd line with indent B. 4th line th indent long pre block start here here here here here here here her C. 5th line 2. 6th Line </pre> 

CSS:

 pre { border: 1px solid black; height: 460px; width: 320px; white-space:pre-wrap; } 

Вывод:

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

Не самое идеальное решение и, вероятно, не решение, которое вы искали, но это решение, тем не менее, делает эту работу. Он использует jQuery для замены пре-блока списком, поскольку списки сохраняют отступы при переносе текста.

http://pastehtml.com/view/bj4d0az5r.html

Или вы можете использовать PHP (или что-то в этом роде). Например:

Определите, какой браузер / платформа использовалась:

 $browser = get_browser(null, true); print_r($browser); 

А для мобильных ОС вы можете использовать оператор if / else с функцией wordwrap для разрыва и отображения вашего контента. Например:

 <?php $text = "A very long woooooooooooord."; $newtext = wordwrap($text, 8, "\n", true); echo "$newtext\n"; ?> 

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

 pre { word-wrap:break-word; } 

PRE автоматически заполнит контейнер. Пока ваш контейнер имеет размер по ширине экрана и не имеет переполнения, он отлично работает (сохраняет отступы во время разрывов строк).

Wordwrap содержание pre, чтобы вы не превышали фиксированный.

 pre { width:100%; word-wrap:break-word; } 

Это может решить вашу проблему.

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

Я боюсь, что нет никакого способа сделать это CSS, потому что CSS не имеет «знания» о таких вещах, как фактическое текстовое содержимое элемента, например, о ведущих пространствах. Поэтому необходим другой подход. Если вы контролируете разметку, вы можете заменить элемент pre элементом div содержащим однострочные элементы div с атрибутами class соответствующими желаемым уровням отступов. Затем вы указываете подходящие левые поля. Демо-версия:

http://pastehtml.com/view/bjbgnb1v3.html

(Демо устанавливает левое поле в ch единицах, но использует настройку в em единицах как разумное резервное копирование. Для моноширинного шрифта один em близок к ширине двух символов.)

Это не обрабатывает все функции pre поэтому, если необходимо сохранить несколько пробелов внутри строки, добавьте white-space: pre-wrap .

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

Если вы не можете контролировать разметку HTML, вам может потребоваться сделать что-то на стороне клиента (преобразовать элемент pre в другие элементы), аналогично коду в предложении AncientMan.

Intereting Posts
Службы Google Play и «Нет связанного приложения, связанного с этим идентификатором клиента» Как программно отвечать на вызов Форматировать сообщение об исключении, чтобы содержать весь стек в Google Analytics для Android? Как я могу использовать значок вместо названия на панели инструментов Android? Хранить base64 закодированную строку как файл Заключается в том, что повторное использование хранилища Android Shared Preference влияет на производительность? Как использовать SparseArray в качестве источника для адаптера? Адвокатское посредничество – идентификатор издателя против идентификатора медиации Использовать фонарик камеры в Android Что такое SDK Patch Applier в Android SDK Tool? Несовместимости уровня сервиса MonoTouch / MonoDroid? Как читать базу данных другого приложения Как использовать проводник на корневом устройстве? Android Studio – установка пользовательских шрифтов с менеджером активов в фрагменте Как тестировать ежедневные сигналы тревоги на Android?