Overlapping Text in CSS - How do I change it?

Question

I'm trying to change an overlapping element (text) in my css file. One line of texts (in a regular browser) appears as two lines of text in mobile, overlapped together.

This change is for the mobile version of the site (the @media section for landscape tablets)

Currently, the header (h2) text is overlapping on an iPad/tablet.

Code from the h2 @media section:

.da-slide h2{
    font-size: 36px;
    width: 80%;
    top: 40px;
    padding: 18px 20px 18px 20px;

(The .da-slide h2 is the component that holds this text in the html)

I tried the line-height property but it didn't work?

Any ideas...

Answer 1

Are you sure that the line-height css property has been apply to your class?

CSS

    .da-slide h2{
        font-size: 36px;
        line-height: 36px;
        width: 80%;
        top: 40px;
        padding: 18px 20px 18px 20px;
    }

Otherwise, have you added the meta tag in the header?

<meta name="viewport" content="width=device-width, initial-scale=1">

Also, for responsive website, be sure that the text isn't ajusted:

CSS

body { -webkit-text-size-adjust: none; }

Answer 2

This should do it by preventing the text from wrapping, but it will cut off the end text. i.e. won't display any text longer than the width.

Just add it to existing class:

display: block; /* may help stop any text wrapping and display it inline. */
display: inline; /* same as above */
white-space: nowrap;/* ensure no wrapping */
overflow: hidden; /* if for some reason it escapes the visible area don't display anything. */

Personally I like to use the ellipsis effect for long titles and tablet devices. Ellipsis trims the text and adds three dots where text has been trimmed.

text-overflow: ellipsis; /* if text is too long add three dots to the end to indicate text  continues */

Example of effect below:

This is an extremely long and completely unavoidable page title I need to show

This is an extremely long and completely unavoidable page title I need to show

Depending on width might display as:

This is an extremely long...

Hope that helps.