Max-width подходит для текста?

Не лучший титул, но в любом случае...

У меня есть элемент с max-width и некоторым текстом.

Если текст длиннее, чем соответствует одной строке, я получаю следующее:

----------------------------
|My text here, hello       |
|everyone!                 |
----------------------------

Другими словами, он принимает полную максимальную ширину, но там справа пустое место из-за перемещения слова.

Есть ли способ сделать это так, чтобы это произошло?

---------------------
|My text here, hello|
|everyone!          |
---------------------

Ответ 1

Невозможно с помощью CSS только

Согласно BoltClock в этом ответе, это невозможно. Объяснение имеет смысл. Для начала переноса строки линия должна достигать установки max-width. После этого он обертывается, но он не решается, потому что он использует этот размер для вычисления обертки.

Насколько я знаю, это все еще невозможно.

Ответ 2

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

<div id="example">
    <span id="content">My text here, hello everyone!</span>
</div>

var content = document.getElementById("content");

content.parentNode.style.width = content.offsetWidth + "px";

рабочий пример

Ответ 3

Почувствуйте, что word-break - это то, что вам нужно http://caniuse.com/word-break, хотя это новое свойство CSS3 с не такой широкой поддержкой.

Ответ 4

Используйте приведенное выше решение, но на дисплее набора внутренних элементов: table-caption и НЕ устанавливайте max-width: 0px. Это будет включать поддержку сафари (а также Firefox 17 и IE8/9 и Chrome).