javascript - テキストで水平に展開する Div

Question

含まれているテキストで水平方向に拡大する div を作成することが可能かどうか疑問に思います。(純粋な CSS が良いでしょうが、それは不可能だと思います)

高さ、最小幅、最大幅が固定されているとしましょう。テキストがそこに収まるほど短い場合、ボックスは変更されません。ボックスがいっぱいになると、右に拡張し始めます。

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