博客

width： fit-content

给一个固定宽度的div里面输入一厂串连续的英文字母，如果输入的足够多，文字会溢出来，就像这样：

  <div class="con">
    <p class="em">aghjjagagjljgagjklaljgagjao4ejlgejjgla</p>
  </div>

<style>
  .con {
    width: fit-content;
    width: 100px;
    outline: 1px dotted;
  }
  .em {
    font-size: 16px;
  }
</style>

解决办法：

给外层标签添加 width:fit-content取代直接设置宽度。

width:fit-content 可以实现 文字较少时居中显示，文字多时，末尾的一行左对齐显示

  <div class="c">
    <div class="fit">
      国家路过看看两个拉过来g案件共计拉工具栏绿咖喱鸡格拉阿纲解决了阿钢筋
    </div>
    <div class="fit">
      谢谢大家
    </div>
  </div>

<style>
    .c {
      width: 200px;
      background-color: aquamarine;
    }
    .fit {
      width: fit-content;
      margin: auto;
    }
    

</style>

效果：

• 还可以实现“竖行文字效果”

<div class="div">
    <p class="p">天下上午循环</p>
</div>
<style>
    .p{
        width: fit-content;
        outline: 1px dotted;
    }
    .div {
      width: 1em;
    }
</style>

效果如下：


实现“竖行文字效果还可以用 white-space:pre-wrap 结合设定单个文字宽度为 1em”