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

Question

Допустим, у меня есть этот фрагмент кода HTML:

<div id="container">
<div id="textContent">Text Content Te</div>
<div id="anotherText">Another Text Content</div>
</div>

Оригинальный вывод HTML http://img26.imageshack.us/img26/1571/beforeeffect.gif

Интересно, как я мог бы динамически изменить ширину div textContent так, чтобы она хорошо вписывалась в текстовое содержимое (ни текст не будет перенос , прокрутка усечен ).

Требуемый вывод HTML http://img26.imageshack.us/img26/5851/desiredeffect.gif

Я открыт для любого решения, использующего CSS и / или JavaScript.

Answer 1

Интересно, как я мог динамически изменил ширину div, чтобы соответствовать текстовое содержимое (без переноса)?

Предполагая, что содержимое будет помещаться без переполнения, вы можете использовать плавающий элемент без установленной ширины (ширина не требуется в CSS 2.1 или более поздней версии). Без более подробной информации я не могу предложить, куда его поместить или какие другие свойства нужно установить для получения желаемого эффекта (например, плавающие элементы плавают вокруг следующего содержимого, поэтому поместите его в начало абзаца).

Если вас не интересует эффект, выглядящий идеально в старых браузерах, таких как Internet Explorer, вы можете использовать display: table или display: table-cell с предупреждением о том, что таблицы не переполняются: они растягиваются. Это растяжение может быть желательным, если вы хотите избежать переполнения вашего div, но разрешите ему перекрывать область просмотра - например, полосу пленки, которая прокручивается горизонтально. В этом случае предложение altCognito о white-space: nowrap было бы очень полезно.

Answer 2

<style>
div {
  white-space: nowrap;
}
</style>

Это поможет (хотя вы, вероятно, должны быть более конкретны в отношении div, которые вы хотите изменить. Это означает, что у div, для которых вы это используете, не будет никаких переводов строки, если вы сами не укажете их. Я предполагаю, что вы используете это для меток, поэтому вы должны быть все в порядке.

См. Пример.