将居中文本转换为左/右边缘，不会溢出 [英] 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屋！
