javascript - div 随文本水平扩展

Question

我想知道，是否可以创建一个水平扩展包含文本的 div。（纯 CSS 会很好，但我想那是不可能的）

可以说它有一个固定的高度，一个最小宽度，没有最大宽度。如果文本足够短以适合其中，则该框不会改变。如果 Box 已满，它会开始向右扩展。

Answer 1

Isn't this posible to do with just HTML and CSS by doing something like this? :

---

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 */
}

Answer 2

你可以使用<input type='text' id='textboxsizedemo' onChange='changeSize(this);' name='text' />. 如果 onChange 不起作用，请使用 onKeyDown，然后使用此 javascript：

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;
}