CSS 最大宽度文本大小问题

Question

我有一个手风琴风格的标题，接下来我也需要对齐一个绝对定位的图标。我目前可以轻松地做到这一点，方法是将图标设置为绝对，将 H3 标题设置为相对，并将其向右对齐。

我遇到的问题是我的文本在移动设备上有一个最大宽度，以阻止它点击与右侧对齐的按钮，为图标留出空间。当文本点击此图标时，它跨越 2 行，但 max-wisth 意味着我的图标不再与文本对齐。有谁知道任何解决方法可以将其与文本整齐对齐

示例

查看下图，了解多行标题如何跨越 2 行，最大宽度将图标放在最后

带注释的图像

代码

CSS

h3 {
    margin-bottom: 0;
    display: inline-block;
    padding: 0;
    font-weight: 800 !important;
    color: #211850 !important;
    font-size: 17px !important;
    line-height: 25px;
    font-size: 15px;
    max-width: calc(50% - 19px);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.fa-question-circle-o {
    position: absolute;
    top: 50%;
    right: -25px;
    transform: translateY(-50%);
    margin-left: 0;
}

HTML

 <h3>
    {{ agreement.sectionName }}
    <i class="fa fa-question-circle-o" (click)="openModal(agreement.sectionName, agreement.infoContent)"></i>
</h3>

Answer 1

处理此问题的一种方法是使用width: min-content，它将宽度设置为显示所有内容所需的最小值。

（注意：在 sn-p 中，我必须添加相当多的 HTML 和 CSS 以使其看起来像您的屏幕截图；如果您发布 Minimal, Complete, and Verifiable example 会更好）。

section {
  width: 290px;
  height: 61px;
  position: relative;
  background: #eaeaea;
  border-radius: .5em;
  margin: .5em;
}

h3 {
  margin: 0;
  display: inline-block;
  padding: 0;
  font-weight: 800 !important;
  color: #211850 !important;
  font-size: 17px !important;
  line-height: 25px;
  font-size: 15px;
  max-width: calc(50% - 19px);
  position: absolute;
  left:0; top: 50%;
  transform: translateY(-50%);
  /* debug */
  outline: 2px solid red;
  /* solution */
  width: min-intrinsic;         /* old Safari */
  width: -moz-min-content;      /* Firefox */
  width: -webkit-min-content;   /* old Chrome */
  width: min-content;           /* modern browsers */
}

.fa-question-circle-o {
  position: absolute;
  top: 50%;
  right: -25px;
  transform: translateY(-50%);
  margin-left: 2px;
}

/* emulate FA */
.fa-question-circle-o::after {
  font-style: normal;
  content: '?';
  border: 2px solid;
  border-radius: 100%;
  display: inline-block;
  width: 1em;
  line-height: 1em;
  text-align: center;
  color:#969696;
}

<section>
  <h3>
    Test
    <i class="fa fa-question-circle-o" (click)="openModal(agreement.sectionName, agreement.infoContent)"></i>
  </h3>
</section>
<section>
  <h3>
    Testing
    <i class="fa fa-question-circle-o" (click)="openModal(agreement.sectionName, agreement.infoContent)"></i>
  </h3>
</section>
<section>
  <h3>
    Testing multiline
    <i class="fa fa-question-circle-o" (click)="openModal(agreement.sectionName, agreement.infoContent)"></i>
  </h3>
</section>

警告：

• 这在 IE 和 Edge 中不起作用。如果你需要支持这些，这个解决方案已经出来了
• h3 的宽度将成为显示所有内容所需的最小宽度；这可能不是你想要的。把第一个的内容从“Test”改成“X Y Z”看看我的意思。