HTML выравнивание текста по ширине с помощью тега ‹pre›

У меня проблема с выравниванием текста "по выравниванию" внутри абзаца с форматом и фиксированной шириной, потому что я хочу, чтобы текст абзаца в HTML выглядел полностью выравниваемым (как это произошло бы с файлом MS Word). Однако этого не происходит. Что мне нужно изменить, чтобы достичь этого?

     <pre style="color: #000000; font-family: Arial, Helvetica, sans-serif; font-size: medium; width: 500px; text-align: justify;"> 

I have a problem with the text-align "justify" inside a paragraph with format and fixed width, because I want the paragraph text in HTML to appear totally justified (like it would happen with a MS Word file). However, this does not happen. What I need to modify to achieve it?

        </pre>

EDIT: если я заменю тег <pre> тегом <p>, мой код будет работать правильно. Может кто-нибудь объяснить мне, почему? Возможно, я неправильно использую тег <pre>.


html fixed-width text-justify pre
person julianfperez    schedule 19.01.2012    source источник

Ответы (3)


arrow_upward
15
arrow_downward

Чтобы выровнять текст в <pre>, вам нужно добавить white-space: normal; в свои стили, но, на мой взгляд, это упускает смысл использования тега <pre>.

-- Редактировать --

Вместо тега <pre> вы можете просто использовать <div> с соответствующими стилями. Он может очень хорошо имитировать тег <pre>, и с ним легче играть.

person Kobra    schedule 19.01.2012
comment
Спасибо за ваш ответ. Я пробовал это, но это не работает. - person julianfperez; 19.01.2012
comment
Почему вам нужно использовать элемент <pre>? - person Mr Lister; 19.01.2012
comment
^ Хороший вопрос, @jfpeji, вы можете использовать <div> с соответствующими стилями. Он может очень хорошо имитировать <pre>. - person Kobra; 19.01.2012
comment
@MrLister: Спасибо за ваш комментарий. Я понимаю, что мне действительно нужен тег <p> вместо тега <pre> (я думал, что последний используется для форматированного текста). - person julianfperez; 19.01.2012
comment
@Kobra: Спасибо за ваш комментарий. Это работает. Если вы отредактируете свой ответ, включив в него решение <div>, я буду рад принять его. - person julianfperez; 19.01.2012

arrow_upward
1
arrow_downward

Используйте теги:

<pre><code>
Your text
Your text
</code></pre>

Удалите все пробелы перед вашим текстом, все отступы.

person Victor    schedule 04.08.2017

arrow_upward

arrow_downward

person    schedule
comment
Спасибо за ответ Devalli - не могли бы вы объяснить, почему это работает, а также просто код? Спасибо. - person StackExchange What The Heck; 13.03.2015
comment
w3schools.com/cssref/pr_text_white-space.asp Последовательности пробелов будут свернуты в один пробел. Текст будет переноситься при необходимости и на разрывы строк - person Devalli; 13.03.2015