Question

我正在从事一个项目，但是在理解CSS行为如何方面遇到一些问题。

看看这支笔，我在其中重新创建了一个非常基本的场景： https://codepen.io/BroderBen/pen/MXrMyy

//Markup
<h2>This is how it looks now:</h2>
<div class="parent">
  <h3> Hello Hello </h3>
  <h3>
    Helloooooooooo Helloooooooooo 
  </h3>
</div>

<h2>width: min-content makes text break prematurely (first segment with hello hello):</h2>
<div class="parent">
  <h3 class="min-content"> Hello Hello </h3>
  <h3 class="min-content">
    Helloooooooooo Helloooooooooo 
  </h3>
</div>

<br/>
<h2>This is how I want it to look, but automaticly (not with br tags):</h2>

<div class="parent">
  <h3> Hello Hello </h3>
  <h3>
    Helloooooooooo <br/> Helloooooooooo 
  </h3>
</div>

//CSS
.parent{
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid black;
  width: 200px;
}
h3{
  border-bottom: 2px solid black;
  text-align: center;
}
//added min-content class to showcase problems
.min-content{
  width: min-content;
}

我有一些带有底线的文本，宽度是相对于内部文本的，因此边界仅“覆盖”了文本下方的区域。

问题来了，当文本太多，因此换行到第二行时，即使旁边有很多白色，孩子也会占用父母的100％。

父级需要是一个伸缩容器，所以我认为表/表单元格技巧不会起作用。

我尝试过使用min-content，但是在到达父级宽度之前它会包裹文本，而max-content似乎根本不会破坏文本。

谢谢！

Answer 1

我通过使用表格单元格“ hack”解决了这个问题。笔将使用解决方案进行更新。

我找到了这个示例，并按照它进行操作：http://jsfiddle.net/audetwebdesign/h34pL/

:after {
    content: "";
    display: table-cell;
    width: 100%;
}

编辑：就我而言，我必须使用：after和：before。将每边的％调整为15％，以适应可能占用此空间的不同文本。

这不是一个“全面解决方案”，适用于我的具体情况。

Answer 2

您可以通过添加文本对齐和宽度样式来解决此问题：

text-align: center;
width: min-content;

希望这会有所帮助：>

.parent{
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid black;
  width: 200px;
}
h3{
  border-bottom: 2px solid black;
  text-align: center;
width: min-content;
}

<h2>This is how it looks now:</h2>
<div class="parent">
  <h3> Hello Hello </h3>
  <h3>
    Helloooooooooo Helloooooooooo 
  </h3>
</div>

<br/>
<h2>This is how I want it to look, but automaticly (not with br tags):</h2>

<div class="parent">
  <h3> Hello Hello </h3>
  <h3>
    Helloooooooooo <br/> Helloooooooooo 
  </h3>
</div>

文字换行时元素占用100％的宽度（flexbox）

2 个答案: