How to make vertical text change into horizontal text in css?


Tags: html,css

Problem :

I am just working at an CMS site...but just got into a problem that the slider had text been written first in horizantal one line and now it shows into vertical text per word in every line like in a continuous way...so I am really wondering that what's happening the text to be showed in vertical form instead of horizontal form..so friends any help please...anyone who can tell or findout the real issue..!

The Text Is : "Serving Over 40 Years"

Here it's HTML Code :

<div class="txt2">Serving Over 40 Years</div>

While here it's CSS code :

.slider .txt2{ 
 width:100%; 
 height:30px;  
 z-index:11;  
 font-family:'NeouThin';
 font-size:30px; 
 line-height:30px; 
 color:#000000;
 text-shadow:1px 1px 3px rgba(0, 0, 0, 0.9);
 }

Here is slider class CSS code please :

.slider {
position: absolute; left:0px; top:0px; z-index:6;
display: block;
width:975px;
height:537px;
overflow:visible!important;
}

And Here is live link to the site please : http://www.huntedhunter.com/raymain_errors/

waiting for your replies..thanks..

Thanks..



Solution :

Just add white-space: nowrap; to the txt2 class and it works.

Awesome picture slider btw !


    CSS Howto..

    How to make a dotted underline link on hover?

    how to center text vertically in html using css only

    How to move items to left inside a div?

    How to add CSS inline in Vaadin?

    How to align images and text in css?

    How to get div height 100% inside td of 100%

    How can I rotate a font icon 45 degrees?

    How to make the header part of the site as low as the logo?

    Showing hidden divs element using jQuery show() not working in IE7

    How to change CSS of last tab in Bootstrap Tab

    How to get these tables stacked on top of each other?

    How to change css dynamic by javascript

    How to get these divs side-by-side while still keeping position:relative and not using float?

    How to navigate divs in a custom built single page app? [closed]

    How to activate a CSS3 (webkit) animation using javascript?

    How to apply different CSS style to child elements as they occur inside one another?

    how to give margin between li using css?

    How to not inherit CSS styles from parents? [duplicate]

    How to CSS border spacing (or) padding background image separately?

    How to Set Up a Responsive Background-Image with CSS

    How to use CSS first-child but excluding text content

    How can i use “z-index” as an css attribute selector?

    How is the scroll effect achieved in this webpage?

    How can I show a DIV when hovering on a DIV using pure CSS?

    How to inspect CSS element using chrome?

    How to get a label under an underlined word in css? [closed]

    How to find an element using Watir by inline css styles

    How to redefine a CSS class for the whole document?

    How to align text and images on one line and position those to the left and/or right?

    How Do I Make Li Clickable for Radio Button Inside