CODEWITHSUNDEEP
htmlcss
tarabario
tarabario

Reputation: 1

Any ideas on how to truncate the strings on both sides like in the picture? WITH ONLY CSS

I tried to truncate the string with:

but it's only one side even the direction CSS property. Also tried the transform: translateX(), but it move the whole block without moving the hidden text. Also, I googled something like "static ticker", but that isn't it.

Maybe, I need to use flex/grid rows with 3 columns for each string and truncate the first and last columns?

Screenshot from Figma: https://i.sstatic.net/f7eYf.png

Upvotes: 0

Views: 47

Answers (1)

dqhendricks
dqhendricks

Reputation: 19251

.container {
    overflow: hidden;
    width: 100px;
    display: flex;
    justify-content: center;
}

.content {
    white-space: nowrap;
    text-align: center;
    display: inline-block;
}
<div class="container">
   <p class="content">
      blah blah blah<br>
      blah blah blah blah blah blah blah blah
   </p>
</div>

Upvotes: 0

Related Questions