将最大宽度设置为详细信息标签而不影响下拉箭头

debugcn 发表于 Dev

弗雷迪

我有以下标记：

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标签上设置了样式。我该怎么办？

詹姆斯

你可以，如果你愿意，只需<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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。