问题:对宽高不定的块级元素设置绝对定位居中后,元素中的文本并没有撑满父容器,反而自动换行了,代码如下:
html部分:
<body>
<div>IT'S NICE TO MEET YOU</div>
</body>
css部分:
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 80px;
}
效果如下:
答案:搜索后发现了这个问题下的回答,https://segmentfault.com/q/1010000003485291试了下发现,原来如此。
简而言之就是,transform: translate(-50%, -50%);是一个二维变换,它只是一个渲染效果,而不是布局本身,去掉transform后发现,文本已经碰到了body的边缘,所以才会换行,如图:
想要文本不换行,可以设置white-space: nowrap;