javascript - 将一个元素的宽度绑定(bind)到同级元素的宽度

Question

我正在尝试设置 <p> 的最大宽度标记到 sibling 的宽度 <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());

我还没有测试过，但按照这些思路应该可以解决问题。