为多行元素指定其最长行的长度

Question

我有一个带有换行文字的段落。如何使该段落采用其最长行的

width

，该行适合其父级/包含该段落的网格单元内？

基本上，对于下面的文本，我希望段落（橙色背景框）宽度与最长粉红色线的长度相同：

哪一行最长取决于文本的大小/当段落的父级/包含它的网格单元改变大小时它如何重新排列：

使父级成为网格并在段落上设置

place-self: center

（这也是限制其

width

的全部意义，我希望它是最长线的长度，以便我可以将其居中对齐）不会工作 - 段落占据其整个网格单元的宽度，不限于其最长行的长度。

Answer 1

您可以通过编写一个简单的脚本来实现

function setWidth() {
  var inputValue = document.getElementById("widthInput").value;
  document.querySelector("#paragraph").style.width = inputValue + "px";
}

function removeWidth() {
  document.querySelector("#paragraph").style.width = document.querySelector("#textContent").getBoundingClientRect().width + "px";
}

span {
  background-color: pink;
}

p {
  background-color: orange;
  color: black;
  width: 300px;
  height: 300px
}

<p id="paragraph"><span id="textContent">Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus cupiditate commodi nam porro modi qui atque nesciunt architecto magnam quis optio corrupti eligendi repudiandae, delectus voluptatibus non voluptatum aliquid natus!</span></p>
<input type="number" id="widthInput" placeholder="Enter Width in px">
<button onclick="setWidth()">Set Width</button>
<button onclick="removeWidth()">Remove Extra Width</button>