Div 使用文本水平扩展

Div expanding horizontally with text

本文关键字：水平 扩展 文本 Div      更新时间：2023-09-26

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

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

通过做这样的事情，这难道不能只与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 */
}
您可以使用

<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;
}
相关文章：