通过过渡增加文本元素的宽度而不换行其内容
[英]increase width of a text element by transition without wraping its content
问题描述
I have created a phone button on my website ringing.
我在我的网站上创建了一个电话按钮来响铃。 It will expand by hover on it and show the phone numbers we have and it is working properly but we do not want to wrap text when expanding with transition.它将在其上扩展 hover 并显示我们拥有的电话号码并且它工作正常但我们不想在使用过渡扩展时换行文本。 Do you guys have any idea how can i do this?你们知道我该怎么做吗？
I have tried overflow-x: hidden but it is still wraping text into two line when expanding.我试过overflow-x: hidden但它在扩展时仍然将文本换行成两行。
document.getElementById("increase-width").addEventListener('mouseover', function() { document.querySelector('#increase-width').style.width = "100%"; // document.querySelector('#increase-width span a').style.opacity = "1"; document.querySelector('#tel-parent').style.float = "left"; document.querySelector('#tel-parent').style.width = "190px"; document.querySelector('#tel').style.display = "block"; // document.querySelector('#tel').style.transition = "opacity 2.5s"; document.querySelector('#increase-width').style.transition = "width 1s ease-in-out"; document.querySelector('#tel-parent').style.transition = "width 1s ease-in-out"; }); document.getElementById("increase-width").addEventListener('mouseout', function() { // document.querySelector('#increase-width span a').style.opacity = "0"; document.querySelector('#tel-parent').style.width = "55px"; document.querySelector('#tel').style.display = "none"; document.querySelector('#increase-width').style.transition = "width 1s ease-in-out"; document.querySelector('#tel-parent').style.transition = "width 1s ease-in-out"; });
.p-16 { padding: 0px; height: 47px; display: flex; justify-content: left; align-items: center; }.radius-50 { border-radius: 66px; }.bg-violet { background: #F8F7FA; }
<:DOCTYPE html> <html> <body> <div class="p-16" id="tel-parent" style="float; left: width; 55px: transition; width 1s ease-in-out 0s:"> <div class="bg-violet radius-50 p-16" id="increase-width" style="width; 100%: transition; width 1s ease-in-out 0s:"> <span class="text-orange show-on-hover" id="tel" style="display; none:"> <a id="021" href="tel:" style="color; #FF7200:">021-98780000</a> - <a id="1533" href="tel:" style="color; #FF7200.">6566</a> </span> <img src="/uploads/2022/10/fi-rr-phone-call-1.svg" id="img-on-hover" alt=""> </div> </div> </body> </html>
1 个解决方案
解决方案1
0 2022-12-10 21:18:14
Actually i found out i should add a simple css like below code to #tel-parent :实际上我发现我应该像下面的代码一样添加一个简单的 css 到#tel-parent ：
white-space: nowrap;
And for a better appearance you can add to previous element为了获得更好的外观，您可以添加到上一个元素
overflow-x:hidden
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.