Could you kindly assist me with a solution for displaying auto-moving text (similar to a marquee with alternative behavior) on a label that contains lengthy text?
https://i.sstatic.net/hEEgO.jpg
I have noticed that the Created On: 28 Nov, 2017 label in sap.m.ObjectAttribute is wrapping due to the default behavior of the ObjectListItem control. I am seeking a CSS solution that would make the wrapped text move back and forth like a marquee, allowing me to view the entire unwrapped text bouncing back and forth.
Please take a look at this example. When you hover over the div, the label begins scrolling left, and when you move away from the div, it scrolls back to its original position.
I need CSS similar to this example but with an automatic effect. Once applied to any applicable label with long text, the label should automatically start scrolling back and forth.
Your assistance in solving this matter is greatly appreciated.
Here is another example based on marquee
body {
background-color: lightgrey;
}
.blue-btn {
position: absolute;
left: 35%;
top: 40%;
}
.blue-btn a {
color: white;
text-decoration: none;
margin-top: 0em;
text-align: center;
display: inline-block;
/* important */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.blue-btn,
.first-link {
-moz-transition: 3.3s;
transition: 3.3s;
-moz-transition-timing-function: linear;
transition-timing-function: linear;
}
.blue-btn {
height: 64px;
font: normal normal 700 1em/4em Arial, sans-serif;
overflow: hidden;
width: 200px;
background-color: #3b5998;
}
.blue-btn:hover {
background-color: #003D99;
}
.blue-btn a:hover {
text-decoration: none;
}
.first-link {
margin-left: 0em;
}
.blue-btn:hover .first-link {
margin-left: -300px;
}<div class="blue-btn">
<a class="first-link" href="">Thisisanextreamlylongtext,kindoflikeanamecouldbe</a>
</div>