Поведение текста переполнения в CSS с не левыми значениями для выравнивания текста - PullRequest
Новая
       3

Поведение текста переполнения в CSS с не левыми значениями для выравнивания текста

8 голосов
/ 21 сентября 2010

С учетом следующего HTML: 

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>

И следующий CSS: 

p { border: 1px solid red; width: 200px; text-align: right; white-space: nowrap; }

Каким будет ожидаемый рендеринг? Я ожидал, что текст уперется в правую часть параграфа и переполнится влево. Наблюдаемые результаты в Fx / Safari / Opera сводят текст влево и переполняют вправо. Та же проблема наблюдается с выравниванием текста: центр; Я ожидаю, что текст будет одинаково переполнен в обе стороны.

CSS2.1 и CSS3 Text, похоже, не определяют рендеринг.

Тестовая ссылка: http://www.webdevout.net/test?0e&raw

Ответы [ 4 ]

12 голосов
/ 21 сентября 2010

Мне удалось получить результат, который вы получили после использования свойства направления , например 

p { 
    direction: rtl; 
    border: 1px solid red; 
    width: 200px; 
    text-align: right; 
    white-space: nowrap;
}

, которое работало в текущих версиях Firefox, Safari и IE.

9 голосов
/ 21 сентября 2010

Раздел " Inline Formatting Context " спецификации CSS 2.1 гласит:

Когда общая ширина встроенных блоков в строке меньше шириныв линейном блоке, содержащем их, их горизонтальное распределение внутри линейного блока определяется свойством text-align.Если это свойство имеет значение 'justify', пользовательский агент также может растягивать пробелы и слова во встроенных блоках (кроме блоков inline-table и inline-block).

Когда встроенный блок превышает ширинулинейный блок, он разбит на несколько блоков, и эти блоки распределены по нескольким линейным блокам.Если встроенный блок не может быть разделен (например, если встроенный блок содержит один символ, или правила разрыва слов для конкретного языка запрещают разрыв внутри встроенного блока, или если на встроенный блок влияет значение пробела nowrap или pre), то встроенное поле переполняет строковое поле.

Итак, свойство text-align используется только в тех случаях, когда длина строчного поля меньше ширины блока.Если строковый блок шире, чем содержащий его элемент, свойство text-align не рассматривается.

3 голосов
/ 10 сентября 2014

Вы можете создать ограничивающий размер внешнего контейнера и внутренний элемент, показывающий содержимое, перемещается вправо, как:

HTML: 

<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
</div>

CSS: 

DIV {
    width: 200px;    
    overflow: hidden;
    border: 1px solid red;
}
P {
    float: right;
    white-space: nowrap;
}

В ответ на идею Олли Ходжсон: 

direction: rtl;

выбрасывает символ взаимодействия в конце предложения (справа) как первый символ (слева) (Google Chrome v. 38)

0 голосов
/ 21 сентября 2010

О, я сталкивался с этим раньше.Выравнивание: вправо влияет только на содержимое в блоке, любое переполнение ВСЕГДА выравнивается по левому краю, это может изменить только изменение направления текста с помощью «direction».

...