Как разместить содержимое DIV с фиксированной высотой

Question

Учтите, что у нас есть DIV с фиксированной высотой. Без определенного width содержание будет распространяться на ширину 100%. Как настроить ширину, чтобы заполнить DIV. Определенно, это не похоже на CSS, поэтому я ищу решение с Javascript.

В этом документе example текст распространяется по ширине 100% и оставляет много свободного пространства на фиксированной высоте. Мне нужно установить ширину 130 пикселей на javascript, чтобы соответствовать содержимому для всего DIV. Но как рассчитать ширину?

ПРИМЕЧАНИЕ: Это значение (130 пикселей) было оценено для примера текста. В зависимости от содержимого DIV, javascript должен рассчитать ширину, необходимую для соответствия содержимому в DIV.

Есть ли способ оценить 2D-размер содержимого DIV?

CSS действительно делает это для высоты; когда мы имеем фиксированную ширину, она продолжает высоту, чтобы заполнить DIV. Можно ли это сделать и для ширины?

Уточнение: Как вертикально заполнять DIV без знания ширины (у нас фиксированная высота)?

Answer 1

Это альтернативный подход. Хотя он менее эффективен, он может быть более точным, чем мой другой ответ.

смотри пример here:

В принципе цикл ширина вниз, пока требуемая высота не будет достигнута

<div id="AA"> 
    <div id='A'> 
     I dont know how wide i am, I dont know how wide i am, I dont know how wide i am, I dont know how wide i am, I dont know how wide i need to be 
    </div> 
</div> 

CSS-:

#AA { 
    height: 300px; 
    border: 1px solid black; 
    width: 100%; 
} 

#A { 
    display: inline; 
} 

Сценарий:

height = $('#AA').height(); 
minWidth = 300; 

currentWidth = $('#A').width(); 
currentHeight = $('#A').height(); 
stop = false; 

if (currentWidth >= minWidth) { 

    while (stop === false) { 
     if (currentWidth >= minWidth) { 
      newWidth = currentWidth - 1; 
      $('#AA').width(newWidth); 
      currentHeight = $('#A').height(); 
      currentWidth = $('#A').width(); 
      if (currentHeight < height) { 
       stop = false; 
      } 
      else { 
       stop = true; 
      } 
     } 
     else { 
      stop = true; 
     } 
    } 
} 

Answer 2

Если я правильно понимаю ваши требования, вы можете сделать это с помощью Javascript.

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

Между тем, внешний <div> имеет overflow: hidden, поэтому все те текущие эксперименты не приводят к изменениям макета страницы.

See it in action.