Question

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

让我们说它有一个固定的高度，一个最小宽度，没有最大宽度。如果文字足够短以适应那里，则框不会改变。如果Box已满，它将开始向右扩展。

Answer 1

您可以使用<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;
}

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

Div用文本水平扩展

2 个答案: