将一个元素的宽度绑定到兄弟的宽度

Question

我尝试将<p>标记的最大宽度设置为同级<p>标记的宽度。

以下是相关代码：

<div>
  <p>
    <h2 id="annotation_preview_title"> <%= t('marker.annotation.preview_title') %></h2>
  </p>
  <p id="annotation_preview" style="word-wrap: break-word;"></p>
</div>

我使用jquery填充annotation_preview的内容，我希望它的宽度不超过<p>周围的annotation_preview_title标记的宽度。

这是我试图解决的问题的图像：

我希望annotation_preview在达到annotation_preview_title的宽度后进行换行。我已尝试使用css找到here (from another SO post I closed)并尝试使用jQuery执行以下操作：

var previewParagraph = document.getElementById("annotation_preview");
var title = document.getElementById("annotation_preview_title");
previewParagraph.maxWidth = title.width;

两者都没有效果。我对任何和所有解决方案（纯JS，纯CSS，混合，等等）持开放态度。

Answer 1

因为你已经在使用jQuery：

$("#annotation_preview").css("max-width", $("#annotation_preview_title").width());

我还没有对它进行过测试，但这些方面的内容应该可以解决问题。