Div使用文本水平扩展

Question

我想知道是否有可能创建一个带有包含文本的水平扩展的div。(纯CSS会很好，但我想这是不可能的)

假设它有一个固定的高度，一个最小宽度，没有最大宽度。如果文本足够短，可以放入其中，则框不会更改。如果长方体已满，它将开始向右扩展。

Answer 1

您可以使用<input type='text' id='textboxsizedemo' onChange='changeSize(this);' name='text' />。

function changeSize(elem)
{
  var widthperchar = 5; //The width per character
  var textlength = elem.value.length;
  var newwidth = textlength * widthperchar;
  if(newwidth < 200)
  {
    newwidth = 200;
  }
  elem.style.width = newwidth;
}

Answer 2

难道不可以通过这样做来处理HTML和CSS吗？：

html:
<div class="text_box">...Content goes here...</div>

css:
.text_box {
    float:left;
    height:200px;
    min-width:200px;
    max-width: 1000px; /* if you want a max size. can also be 100% or something else */
}