Share Posted July 11, 2019 Hi there, I am having an issue with reduceWhiteSpace:false on splitText. It doesn't seem to be doing anything for spaces and or I have a font where placing a Y character next to another letter, with a space, it looks like there is no space between them. So I need to artificially add some space. I tried adding a span with margin but I was getting issues on some browsers so I need this reduceWhitespace to work. Thanks for your help Will See the Pen VJReXd by ilovemypixels (@ilovemypixels) on CodePen Link to comment Share on other sites More sharing options...
Share Posted July 11, 2019 Try splitting it into words... type: "words,lines" and if needed, chars. type: "chars,words,lines" 1 Link to comment Share on other sites More sharing options...
Author Share Posted July 11, 2019 It still doesn't really work properly. This only makes a small space. 30% OF YOUR<br> Link to comment Share on other sites More sharing options...
Share Posted July 11, 2019 4 minutes ago, iloveaphextwin said: It still doesn't really work properly. This only makes a small space. It looks exactly like your original text. At least in Chrome. I didn't check other browsers. See the Pen JQzXVQ by osublake (@osublake) on CodePen Link to comment Share on other sites More sharing options...
Author Share Posted July 11, 2019 Thanks for your help but I'm just getting confused now. What I am saying is that in the HTML above i have a good 20 spaces and one I would expect the word "YOUR" to be halfway across the page. However its only shifted a little bit to the right, and indeed without the there is almost no extra gap beyond one single space. So to me it looks like reduceWhiteSpace false is not working, in that it is still reducing white space? Link to comment Share on other sites More sharing options...
Share Posted July 11, 2019 My demo shows that the browser is collapsing your white space. The text inside the copy_2 div isn't being split apart by GSAP. If you want spaces, then use See the Pen OeqXaZ by osublake (@osublake) on CodePen 4 Link to comment Share on other sites More sharing options...
Author Share Posted July 11, 2019 Ok thank you very much. I assumed reduceWhiteSpace would avoid this browser issue but I guess its just for managing how splitText actually splits text. thanks again Link to comment Share on other sites More sharing options...
Share Posted July 11, 2019 Yeah, there's no way to avoid that as the browser does it automatically. 2 Link to comment Share on other sites More sharing options...
Share Posted July 11, 2019 Hi @iloveaphextwin, Another option using a <span> (found here) See the Pen NZJRQG by mikeK (@mikeK) on CodePen Happy spacing ... Mikel 4 Link to comment Share on other sites More sharing options...
Author Share Posted July 11, 2019 I tried the span option first, but for some reason on Chrome sometimes the page would load with a couple of extra line breaks. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now