CSS 最大宽度文本大小问题

debugcn 发表于 Dev

基兰姆v95

我有一个手风琴样式的标题，接下来我也需要对齐一个绝对定位的图标。我目前可以通过将图标设置为绝对并将 H3 标题设置为相对并将其负向右侧对齐来轻松完成此操作。

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

例子

请参阅下图，了解多行标题如何跨越 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>

李斯特先生

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

（注意：在代码片段中，我不得不添加相当多的 HTML 和 CSS 以使其看起来像您的屏幕截图；如果您发布了一个最小、完整和可验证的示例会更好）。

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>

警告：