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

2024年1月29日 204次阅读

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

我知道实现这一目标的唯一方法是使用display：table-cell.

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

但是,我想知道是否存在使用纯CSS实现此行为的替代方法,但不使用CSS表.

.container {
  display: table-cell;
  width: 100px;
  text-align: center;
  background: skyblue;
}
<div class="container">
  asd asd asdasdasdasdasdasdasdasdasdasdassdasdasdasdasd asd asd asd asd asd asd asd asd asd asd asd </div>

最佳答案 试试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>
点赞