将明细标签的最大宽度设置为不影响下拉箭头

Question

我有以下标记：

details {
  border-bottom: 1px solid #3C3C3B;
}

details summary {
  outline: none;
  font-weight: 600;
  padding: 30px 0px;
  cursor: pointer;
}

details summary::-webkit-details-marker {
  background: url(https://image.flaticon.com/icons/svg/3/3907.svg) center no-repeat;
  color: transparent;
  width: 30px;
  height: 20px;
  float: right;
}

details[open] summary::-webkit-details-marker {
  background: url(https://image.flaticon.com/icons/svg/3/3581.svg) center no-repeat;
  color: transparent;
  width: 30px;
  height: 20px;
  float: right;
}

<details>
  <summary>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet </summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
</details>

我不希望文本流过下拉箭头所在的区域。这样看起来像这样：

在max-width或details上设置summary无效，因为箭头是在summary标记上设置样式的。我该怎么办？

Answer 1

由于在这种情况下标记的宽度 是已知的，因此我们可以将padding-right应用于 A ID N SC Title Dave 1 5 2 Green Dave 1 10 2 Blue Dave 1 15 3 Yellow Pete 2 100 3 Red Phil 3 200 4 Purple 之后的任何内容。

 A     B     C      D    
 Dave  2     2     3
 Pete  3
 Phil  4

summary

Answer 2

如果需要，您可以将<summary>标签内的文本用<p>标签包围，并将其最大宽度设置为所需的任意大小

details {
  border-bottom: 1px solid #3C3C3B;
}

details summary {
  outline: none;
  font-weight: 600;
  padding: 30px 0px;
  cursor: pointer;
}

details summary::-webkit-details-marker {
  background: url(https://image.flaticon.com/icons/svg/3/3907.svg) center no-repeat;
  color: transparent;
  width: 30px;
  height: 20px;
  float: right;
}

details[open] summary::-webkit-details-marker {
  background: url(https://image.flaticon.com/icons/svg/3/3581.svg) center no-repeat;
  color: transparent;
  width: 30px;
  height: 20px;
  float: right;
}

<details>
  <summary>
      <p style="max-width:70%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet 
      <p>
  </summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
</details>

Answer 3

实现您想要的东西非常简单。您可以为此使用两个重要的CSS函数： 1.计算-计算CSS属性的值 2. vw-视口/屏幕的垂直宽度

根据您的情况，您可以在详细信息中定义段落的宽度，以使视口的宽度减去箭头的宽度。大致来说，箭头占据了大约50px的宽度（如果需要，我们可以增加宽度）。从视口宽度中减去该值，并将其分配给p标签：

p { width: calc(100vw - 60px); }

https://codepen.io/venkat4541/pen/rELawd