Question

我有一个包含文字的div。 div应至少为100px宽，并应尝试通过将文本内部包装在空白上来将自身限制为100px。但是，如果有一个单词或数字不包含中断空格，并且非常长，我希望div扩展以适应该字符串（即没有滚动条，没有在右侧切断文本，并且不允许文本扩展到div之外）。最后，文本应该在div中居中。

我知道完成此任务的唯一方法是使用display: table-cell。

.container {
    display: table-cell;
    width: 100px;
    text-align: center;
}

但是，我想知道是否有其他方法可以使用纯CSS实现此行为，但不使用CSS表。

＆＃13;

.container {
  display: table-cell;
  width: 100px;
  text-align: center;
  background: skyblue;
}

＆＃13;

<div class="container">
  asd asd asdasdasdasdasdasdasdasdasdasdassdasdasdasdasd asd asd asd asd asd asd asd asd asd asd asd </div>

＆＃13;

Answer 1

尝试 Flexbox

Fiddle

.content {
  display: flex;
  flex-direction: row;
  max-width: 100px;
}

 .inner {
  text-align: center;
  border: 1px solid black;
  flex-basis: 100px;
  flex-grow: 1;
  flex-shrink: 1;
}

<div class="content">
  <div class="inner">
    <p>loooooooooooooooooooooooong Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, eum, sapiente. Deserunt, laboriosam accusamus s beatae tenetur illo, provident vel explicabo. Tenetur, eligendi, facere. Voluptas nostrum incidunt, sit maxime magnam?</p>
  </div>
</div>

CSS用于在空白处包装文本，但仍然扩展容器以适应没有空格的长字符串

1 个答案: