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;
}

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

2 个答案: