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”