javascript - 将文本块添加到 div 并设置宽度

Question

我有画布

<div id="app-container">
    <div id="canvas-container">
        <div id="canvas"></div>
    </div>
</div>

在CSS中我有

#canvas {
  position: absolute;
  background-color: white;
  width: 100%;
  height: 100%;
}

#app-container {
  height: auto !important;
  min-height: 100%;
}

#canvas-container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

我正在尝试将文本块添加到画布

$container= $("#canvas");
var $view = $("#template-textview").tmpl();
$("<div class=\"text-field\">" + me.text + "</div>").appendTo($view);
$view.appendTo($container);

在该文本占据所有宽度之后。我怎么能告诉它只占用文本所需的宽度？

先感谢您！！

Answer 1

由于您使用的是块元素 ( div)，它自然会扩展到父宽度的 100%。

要解决这个问题，请尝试inline-block：

div.text-field { display: inline-block }

Answer 2

有了这个 ？

#canvas {
    width: auto;
}