时间戳

首页 > 解决方案 > 将最大宽度设置为详细信息标签而不影响下拉箭头

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

问题描述

我有以下标记：

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

标签： htmlcss

解决方案

由于在这种情况下标记的宽度是已知的，因此我们可以将 padding-right 应用于 . 之后的任何内容summary。

details {
  border-bottom: 1px solid #3C3C3B;
  max-width: 80%;
}

details summary {
  outline: none;
  font-weight: 600;
  padding: 10px 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;
  /* known value*/
  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;
}

summary+* {
  padding-right: 30px;
  /* known value */
}
<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>

推荐阅读