CSS检查元素是否溢出然后来回动画
[英]CSS Check If Element Is Overflowing Then Animate Back And Forth
问题描述
I have some short and long text in html with max-width and overflow styles.
我在 html 中有一些具有max-width和overflow样式的短文本和长文本。 i want to check if an element is overflowing then start back and forth animation to users can see all contents.我想检查一个元素是否溢出然后开始来回动画让用户可以看到所有内容。
Please see this demo:请看这个演示：
.animated { position: relative; white-space: nowrap; max-width: 150px; overflow: hidden; background: #0c0c0c; } .text-animated{ color: #fff; animation: backAndForth 5s linear infinite; } @keyframes backAndForth { 0% { transform: translateX(0); } 10% { transform: translateX(0); } 45% { transform: translateX(calc(100% - 340px)); } 55% { transform: translateX(calc(100% - 340px)); } 90% { transform: translateX(0); } 100% { transform: translateX(0); } }
<div class="animated"> <h3 class="text-animated"> Some Short Text </h3> </div> <span>Must be fixed</span> <br><br><br> <div class="animated"> <h3 class="text-animated"> Some Long And Bigger Text To Animate </h3> </div> <span>Must be Animated to view all text</span>
Can anybody help me?有谁能够帮我？
Thanks谢谢
3 个解决方案
解决方案1
1 2022-06-21 21:10:30
scrollWidth is the width of elements with also not showable content. scrollWidth是不显示内容的元素的宽度。
and offsetWidth is the only showable content width. offsetWidth是唯一可显示的内容宽度。
so if the scrollWidth is different than offsetWidth , this means that is overflowing!所以如果scrollWidth与offsetWidth不同，这意味着溢出！
if (childEl.scrollWidth > childEl.offsetWidth) {
childEl.classList.add("text-animated");
}
/* choose your parent element (that can be also a <body> if you want all elements) */ let parent = document.querySelectorAll(".animated"); parent.forEach((el) => { /* get all h3 from parent (if you want all elements use "*" selector)*/ let childs = el.querySelectorAll("h3"); childs.forEach(childEl => { /* if overflow then add class */ if (childEl.scrollWidth > childEl.offsetWidth) { childEl.classList.add("text-animated"); } }); });
.animated { position: relative; white-space: nowrap; max-width: 150px; overflow: hidden; background: #0c0c0c; } .text-animated { color: #fff; animation: backAndForth 5s linear infinite; } @keyframes backAndForth { 0% { transform: translateX(0); } 10% { transform: translateX(0); } 45% { transform: translateX(calc(100% - 340px)); } 55% { transform: translateX(calc(100% - 340px)); } 90% { transform: translateX(0); } 100% { transform: translateX(0); } }
<!-- 1 --> <div class="animated"> <h3> Some Short Text </h3> </div> <span>Must be fixed</span> <br><br><br> <!-- 2 --> <div class="animated"> <h3> Some Long And Bigger Text To Animate </h3> </div> <span>Must be Animated to view all text</span>
解决方案2
1 已采纳 2022-06-21 21:44:25
Although a max width is set it is not being taken up on the smaller text - notice the widths of both examples are the same.尽管设置了最大宽度，但它并没有被较小的文本占用 - 请注意两个示例的宽度是相同的。
This snippet gives both the div and the h3 a position so that the widths are taken up and the div is set to have width fit-content (it will still obey the max-width).此代码段为 div 和 h3 提供了一个位置，以便占用宽度并将 div 设置为具有适合内容的宽度（它仍将遵循最大宽度）。
The animation needs to take into account both the width of the container and the width of the text.动画需要同时考虑容器的宽度和文本的宽度。 It therefore uses left positioning and transition.因此它使用左定位和过渡。 For the shorter text they balance out so there is no movement.对于较短的文本，它们会平衡，因此没有移动。 For the longer text the amount of movement is just the extra length of the text compared to the container.对于较长的文本，移动量只是文本相对于容器的额外长度。
.animated { position: relative; white-space: nowrap; max-width: 200px; overflow: hidden; background: #0c0c0c; display: inline-block; width: fit-content; position: relative; } .text-animated { color: #fff; animation: backAndForth 5s linear infinite; display: inline-block; position: relative; } @keyframes backAndForth { 0% { transform: translateX(0); left(0); } 10% { transform: translateX(0); left: 0; } 45% { transform: translateX(calc(-100%)); left: 100%; } 55% { transform: translateX(calc(-100%)); left: 100%; } 90% { transform: translateX(0); left: 0; } 100% { transform: translateX(0); left: 0; } }
<div class="animated"> <h3 class="text-animated"> Some Short Text </h3> </div> <span>Must be fixed</span> <br><br><br> <div class="animated"> <h3 class="text-animated"> Some Long And Bigger Text To Animate </h3> </div> <span>Must be Animated to view all text</span>
UPDATE: a couple of additional requirements have been added (in the comments below).更新：添加了一些额外的要求（在下面的评论中）。
The max-width needs to change from a fixed px width to be relative to container size.最大宽度需要从固定的 px 宽度更改为相对于容器大小。 The snippet below demonstrates this by putting the divs in a container whose width depends on viewport size.下面的代码片段通过将 div 放在一个宽度取决于视口大小的容器中来演示这一点。
The text direction has changed from left to right to right to left.文本方向已从左到右变为从右到左。 The settings for left and transform/translate therefore have to swap signs compared to tehe original code above:因此，与上面的原始代码相比，left 和 transform/translate 的设置必须交换符号：
.container { width: 40vw; position: relative; } .animated { position: relative; white-space: nowrap; /* max-width: 200px; */ max-width: calc(100% - 5rem); overflow: hidden; background: #0c0c0c; display: inline-block; width: fit-content; position: relative; white-space: no-wrap; direction: rtl; } .text-animated { color: #fff; animation: backAndForth 5s linear infinite; display: inline-block; position: relative; direction: rtl; } @keyframes backAndForth { 0% { transform: translateX(0); left(0); } 10% { transform: translateX(0); left: 0; } 45% { transform: translateX(calc(100%)); left: -100%; } 55% { transform: translateX(calc(100%)); left: -100%; } 90% { transform: translateX(0); left: 0; } 100% { transform: translateX(0); left: 0; } }
<div class="container"> <div class="animated"> <h3 class="text-animated"> Some Short Text </h3> </div> <br><br><br> <div class="animated"> <h3 class="text-animated"> Some Long And Bigger Text To Animate </h3> </div> </div>
解决方案3
0 2022-06-21 21:06:51
HTML text-overflow ellipsis detection says you can detect if element has overflown content: HTML 文本溢出省略号检测表示您可以检测元素是否溢出内容：
function isEllipsisActive(e) {
return (e.offsetWidth < e.scrollWidth);
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.