问题：对宽高不定的块级元素设置绝对定位居中后，元素中的文本并没有撑满父容器，反而自动换行了，代码如下：
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;
}
效果如下：
捕获1.PNG
答案：搜索后发现了这个问题下的回答，https://segmentfault.com/q/1010000003485291试了下发现，原来如此。
简而言之就是，transform: translate(-50%, -50%);是一个二维变换，它只是一个渲染效果，而不是布局本身，去掉transform后发现，文本已经碰到了body的边缘，所以才会换行，如图：
捕获2.PNG
问题：对宽高不定的块级元素设置绝对定位居中后，元素中的文本并没有撑满父容器，反而自动换行了，代码如下：html部分...
div水平居中 绝对定位居中 三角形 消除transition闪屏 文本溢出 图文不可复制 placeholder
方案一：div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】， 方案二：div绝对定位水平垂...
居中 Flex 文本溢出显示省略号 不被挤 文字换行
水平居中 文字居中 图片居中 绝对定位元素 居中 相对定位 负边距居中 垂直居中 文字设置line-height ...
1、居中元素宽高固定 绝对定位+margin 绝对定位+calc 2、被居中元素宽高不定 transform变换 ...
今天学到的 相对定位，绝对定位 垂直水平居中 banner
box{width:100%;height:714px;position:relative;} box img{...
在网页进行css布局时居中是经常需要用到的，其中就有css绝对定位居中，那么，css绝对定位如何实现居中？今天的这...
问题一：盒子在文档流中居中 方法一：绝对定位-宽高的一半 方法二：绝对定位+margin:auto; 方法三、用t...
本文标题：绝对定位居中后文本的换行问题
本文链接：https://www.haomeiwen.com/subject/llpxjqtx.html
网友评论