将居中文本转换为左/右边缘,不会溢出 [英] Transition centered text to left / right edges without overflowing
问题描述
我可以将 text-align
从中心
转换到左
。使用此代码,如果您运行它,然后将鼠标悬停在其上,您会看到顶部的一个向左。但是底部溢出在右
,你能帮我找出如何使转换到右
不overflow:
注意:这是我真正的应用程序的演示,它有未知/可变宽度的字符串/元素,从1到任何填充一行包装)。
.header {position:fixed;宽度:70%; background-color:springgreen;}。title {text-align:center;}。{text-align:center;}。trans-left {transition:margin-right 1s;}。 1s;}。header:hover .trans-left {margin-right:100%;}。header:hover .trans-right {margin-left:100%;}
< body> < div class ='header'> < div class ='title'> < span class ='trans-left'>这一个向左转< / span> < / div> < div class ='menu'> < span class ='trans-right'>这一个向右转< / span> < / div> < / div>< / body>
您可以这样调整文本元素:
margin-left:100%
margin-right:100%;
这将定位每个元素– 从框的起点–
因此,向左移动框的左边缘将与容器的左边缘对齐。
右移框的左边缘将与容器的右边缘对齐。
<$ c $ c> margin-right:90%; / *根据需要调整* /
这是一个替代解决方案,无论内容宽度如何。
.header {position:fixed;宽度:70%; background-color:springgreen;}。title,.menu {text-align:center;位置:相对; width:100%; height:50px;}。trans-left {position:absolute;左:50%; transform:translateX(-50%); transition:1s;}。trans-right {position:absolute;右:50%; transform:translateX(50%); transition:1s;}。header:hover .trans-left {left:0; transform:translateX(0); transition:1s;}。header:hover .trans-right {right:0; transform:translateX(0); transition:1s;}
< div class = > < div class =title> < span class =trans-left>这一个向左< / span> < / div> < div class =menu> < span class =trans-right>这一个向右转< / span> < / div>< / div>
I was able to transition text-align
from center
to left
. With this code, if you run it, then hover over, you'll see the top one goes to the left. However the bottom overflows on the right
, can you please help me to figure out how to make the transition to right
not overflow:
Note: This is a demo of my real application, which has strings/elements of unknown/variable width, from 1 to anything to fill a single line (no wrapping).
.header {
position: fixed;
width: 70%;
background-color: springgreen;
}
.title {
text-align: center;
}
.menu {
text-align: center;
}
.trans-left {
transition: margin-right 1s;
}
.trans-right {
transition: margin-left 1s;
}
.header:hover .trans-left {
margin-right: 100%;
}
.header:hover .trans-right {
margin-left: 100%;
}
<body>
<div class='header'>
<div class='title'>
<span class='trans-left'>This one goes left</span>
</div>
<div class='menu'>
<span class='trans-right'>This one goes right</span>
</div>
</div>
</body>
You're aligning the text elements like this:
margin-left: 100%;
margin-right: 100%;
This positions each element – from the starting point of the box – to the left and right edges.
Hence, the left edge of the left-moving box will align with the left edge of the container.
And the left edge of the right-moving box will align with the right edge of the container. This causes the rest of this box to overflow.
Try this instead:
margin-right: 90%; /* adjust as needed */
Edit based on revised question
Here is an alternative solution that works regardless of content width.
.header {
position: fixed;
width: 70%;
background-color: springgreen;
}
.title, .menu {
text-align: center;
position: relative;
width: 100%;
height: 50px;
}
.trans-left {
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: 1s;
}
.trans-right {
position: absolute;
right: 50%;
transform: translateX(50%);
transition: 1s;
}
.header:hover .trans-left {
left: 0;
transform: translateX(0);
transition: 1s;
}
.header:hover .trans-right {
right: 0;
transform: translateX(0);
transition: 1s;
}
<div class="header">
<div class="title">
<span class="trans-left">This one goes left</span>
</div>
<div class="menu">
<span class="trans-right">This one goes right</span>
</div>
</div>
More details: Element will not stay centered, especially when re-sizing screen
这篇关于将居中文本转换为左/右边缘,不会溢出的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!