CSS max-width文本大小调整问题

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，将宽度设置为显示所有内容所需的最小宽度。

（注意：在代码段中，我不得不添加相当多的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的宽度将成为显示所有内容所需的最小值;这可能不是你想要的。将第一个的内容从“测试”更改为“X Y Z”以查看我的意思。