Принудительный текст для размещения в родительском элементе

Я понимаю, что display: inline-block приведет к тому, что родительский элемент «сжимается» до ширины самого большого дочернего элемента. Это именно то, что я хочу, если самый большой элемент - это элемент, такой как <img />.Принудительный текст для размещения в родительском элементе

Однако, если строка текста очень длинная, она расширяет ширину родительского элемента.

<div class="hi"> 
    <img src="http://placehold.it/350x150" /> 
    <div class="longtext"> 
     Eu duis eram anim senserit. Quae deserunt voluptatibus ex noster nam eu sunt laboris ea consequat ut amet litteris, ingeniis hic sint, et elit voluptatibus te legam do possumus, fugiat sempiternum tempor irure laboris, possumus tamen sunt expetendis quid. 
    </div> 
    <div class="short">wow</div> 
</div>

Fiddle, так что вы можете увидеть проблему.

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

Ближайший я могу добраться до того, что хочу, position: absolute, но он выводит текст из уровня блока (подталкивает все).

Fiddle.

источник

2015-01-31 Haven Lovell

Заканчивать [этот ответ] (http://stackoverflow.com/questions/12747045/css-shrink-a-parent-div-to-fit- one-childs-width-and-constrain-the-width-of-th), если я правильно понимаю ваш вопрос, первый ответ должен решить вашу проблему. – MTCoster

Это именно то, что я хочу. Однако я надеялся, что мне не придется прибегать к использованию CSS-таблиц. Наверное, это единственное решение, кроме, наверное, 'max-content'. –

Технически это не таблица, просто набор правил, которые обычно используются в таблицах (по умолчанию на самом деле), которые, случается, делают трюк в этой ситуации. – MTCoster

@MTCoster, ваша ссылка дала мне представление.

Если вы играете с шириной, вы можете установить ее ширину так же, как родительский динамически.

Как и в ссылке, width: 1px сжимает таблицу до размера самого маленького слова. Затем min-width: 100% расширяет его до ширины родителя. И только 2 линии!

.longtext { 
    width: 1px; 
    min-width: 100%; 
}

Добавление word-wrap: break-word; еще лучше, потому что это будет препятствовать действительно длинное слово от расширения DIV за пределы своего родителя.

Updated Fiddle.

Большое спасибо!

источник

2015-01-31 18:43:19

Если вы оберните div вокруг длинного текста и короткого div, вы можете получить то, что хотите?

HTML:

<div class="hi"> 
    <img src="http://placehold.it/350x150" /> 
    <div class="longtext"> 
     <div> 
      Eu duis eram anim senserit. Quae deserunt voluptatibus ex noster nam eu sunt laboris ea consequat ut amet litteris, ingeniis hic sint, et elit voluptatibus te legam do possumus, fugiat sempiternum tempor irure laboris, possumus tamen sunt expetendis quid. 
     </div> 
     <div class="short">wow</div> 
    </div> 
</div>

http://jsfiddle.net/5mof1pku/

источник

2015-01-31 18:50:27 chris

Принудительный текст для размещения в родительском элементе

ответ

Смежные вопросы