word break
Hey everyone, I've got a tricky situation where I have my logo that has each letter in a
span (because I am adding animation to each span) but at a certain screensize if the logo overflows, I want it to break at a specific index so I have something like this4 Replies
let me make a codepen out of this actually, it will be easier to see
​ has no impact because all the letters break on their own
https://codepen.io/bbonsaye/pen/JjBVdjy
You'll have to zoom and reduce the screensize to see the logo letters breakbest way is to make .logo a flex with flex wrap and both parts of the word in a separate element.
something like this
https://codepen.io/MarkBoots/pen/zYLXqKw?editors=1111
you still have to apply the animations. but now the single span items are in .logo > .part > span
just seeing this, that's an awesome solution
just want to make sure I understand the logic, we have an outer loop and an inner loop and the
i==0 && j==0 checks to see if we are at the first iteration of the outer and inner loop and if so, we are at the first letter otherwise not first letter
super cool, thank you for thatyep correct