如何根据内容设置div标签样式？

Question

我想根据其中的内容大小创建div标签。我创建了一个消息框，里面有一个消息文本。当文本较少时，例如：嗨，你好，然后div标签应该对齐，并且在右边不要留太多空间。

代码：

string json = JsonConvert.SerializeObject(theme);
System.IO.File.WriteAllText("yourfile.json", json);

CSS：

<div className="msgBox"><p className="msgText">{message.message}</p></div>

所以我的最终目标是根据其中的文本内容确定消息框的大小。如果内容较小，则小框较大，然后内容为大框。

屏幕截图：

Answer 1

不是将背景色分配给msgBox，而是将其分配给文本，并使其成为display:inline-block以具有其内容的宽度

.msgBox {
  max-width: 150px;
  margin-top: 5px;
}

.msgText {
  background-color: #EBEEFD;
  border-radius: 25px;
  padding: 10px;
  display: inline-block;
}

<div class="msgBox">
  <p class="msgText">Hello</p>
</div>

<div class="msgBox">
  <p class="msgText">What are you doing?</p>
</div>

<div class="msgBox">
  <p class="msgText">What are you doing in this chat application?</p>
</div>