div 随文本水平扩展答案

【问题标题】：Div expanding horizontally with textdiv 随文本水平扩展
【发布时间】：2012-08-10 18:42:55
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

做这样的事情难道不能只用 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 */
}

【讨论】：

没有。如果文本很多，框会向右扩展，直到达到 1000 像素。然后它会跳到下一行。我想做的是让文本填满盒子并在填满时展开它。
不行不行，检查jsfiddle。框 1 看起来不错，框 2 应该换行并保持 200 像素宽度，但没有。方框 3 看起来不错。

【解决方案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;
}

【讨论】：

您可以通过将this 传递给函数来增强此功能 - 将 2 次调用保存到 getElementById
不，你没有 - 你需要传入一个引用并使用它。 我已经更新了你的代码 :)
是的，对不起 :P @Lord_Mord 是的，您可以将 elem 更改为 document.getElementById('DIV_ID_HERE') 或使用类似的 getElement 函数。