CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Captain H.
Captain H.

Reputation: 540

How to fix text with limited height and absolute position overflows

I did this neat heading for a website using Bootstrap and some CSS tricks : http://www.bootply.com/QH5olSGxDU

But when using a smartphone with small width (such as an iPhone), the text overflows as shown here : http://imgur.com/k6JaKbi

Have you any idea how to prevent this (idealy by cropping the title like "Some Stuff #6 - Lorem...")? I tried the CSS property text-overflow, but it doesn't work.

Upvotes: 1

Views: 75

Answers (3)

Anuj Kumar
Anuj Kumar

Reputation: 468

Beside adjusting the font size of the text you can also add simple min-height to the image.

.header-image img {min-height: 275px;width: 100%;}

Upvotes: 1

Thoronwen
Thoronwen

Reputation: 608

What about

h2 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 300px; (I've used this to test without a mobile device)
}

?

You could only apply white-space: nowrap; in your mobile css if desired.

Upvotes: 1

JRulle
JRulle

Reputation: 7568

You could use media queries to reduce the font size of the <h2> when the screen size is smaller than a certain size.

@media (max-width: 400px){
  div.header-image-single h2 { font-size: 16px; }
}

Alternatively, you could use javascript to check the window size and if it is smaller than a certain value trim certain tags to a set number of characters.

var str = originalString.substring(0, X); //original string comes directly from the content of the <h2>, the 0 is the starting position and the X is the number of characters you want to keep

here is a JSFiddle that shows this alternative in action (I utilized jQuery to make the selection/manipulation of elements easy, but it would be done with plain JS too)

Upvotes: 2

Related Questions