sigmahokies Posted December 2, 2015 Share Posted December 2, 2015 Hi everyone, I usually write PHP, but this time, I need a help in CSS. I am trying to create a vertical text, Not transfer rotate degree. I want to write like this: C L A S S Thanks, Gary Quote Link to comment https://forums.phpfreaks.com/topic/299624-vertical-text/ Share on other sites More sharing options...
Ch0cu3r Posted December 2, 2015 Share Posted December 2, 2015 If you dont want to rotate the text then you will have to resort to using line breaks after every character <p> H<br />e<br />l<br />l<br />o </p> Or write each character on its own line and apply white-space: pre <style> .vert-text { white-space: pre; } </style> <p class="vert-text">H e l l o</p> Quote Link to comment https://forums.phpfreaks.com/topic/299624-vertical-text/#findComment-1527451 Share on other sites More sharing options...
Barand Posted December 2, 2015 Share Posted December 2, 2015 $word = 'CLASS'; echo join('<br>', str_split($word)); Quote Link to comment https://forums.phpfreaks.com/topic/299624-vertical-text/#findComment-1527458 Share on other sites More sharing options...
Psycho Posted December 2, 2015 Share Posted December 2, 2015 You could also just put a space between every character and put the text in a container with a width of 1px. <div style="width:1px">C L A S S</div> Quote Link to comment https://forums.phpfreaks.com/topic/299624-vertical-text/#findComment-1527459 Share on other sites More sharing options...
Barand Posted December 2, 2015 Share Posted December 2, 2015 It will improve the appearance if you make it wide enough for a character and center the text <div style="width:10px; text-align:center;">C L A S S</div> Quote Link to comment https://forums.phpfreaks.com/topic/299624-vertical-text/#findComment-1527460 Share on other sites More sharing options...
sigmahokies Posted December 3, 2015 Author Share Posted December 3, 2015 Barand and Psycho, it is working now. Thank you, Gary Quote Link to comment https://forums.phpfreaks.com/topic/299624-vertical-text/#findComment-1527494 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.