How to specify a CSS class for text that breaks line in an HTML element?

Navigation
7

Most of the time I work with text within HTML elements, I use a CSS resource called line-height . Suppose the height of a specific element is 50px , so I put line-height with 50px also so that the text is centered. Well, when this text breaks line, that is, ends up being bigger than the size of my element, there is something very cool. Is there a way in CSS that checks if my text broke line so I can add a different line-height property?

Example text where it is centralized correctly, containing little text:

Now,anexampleofhowthetextgetswhenit'salittlebigger,thatis,itgoesbeyondthelimitofmyelement:

Notice that in the image above, the text dropped and maintained the size of the line-height. This is bad because it ends up exceeding the height limit of my element.

Now, how would you like it to be when the text falls to the bottom line:

That would be the problem, possibilities with javascript are not discarded also if someone has a nice solution.

    
asked by anonymous 20.02.2014 / 02:54

2 answers

4

In your CSS you will need to declare height, display as table-cell and vertical-align middle. 

.seletor {
  display: table-cell;
  height: 100px;
  vertical-align: middle;
}

See the example: link

    
25.02.2014 / 15:35
3

Suggestion:

  • Involve this text in line-height or other element, and apply div to it. (You may need to vertical-align: middle .)

  • In the element that involves everything (date, text, padding), then assign a display: inline-block of the same height as line-height for vertical alignment to be applied.

    / li>
20.02.2014 / 03:31
List all Roles in CheckBox and mark the roles that the User has Change src of images through jquery