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

Asked

Viewed 241 times

7

Most of the time I work with texts within elements HTML, I use a resource in CSS called line-height. Suppose the height of a specific element is 50px, so I put the line-height with 50px also so that the text is centralized. Well, when this text breaks a line, that is, it ends up being bigger than the size of my element, it doesn’t become a very nice thing. There is a form in CSS check if my text broke line so I can add a property line-height different?

Example of a text in which it is centered correctly, containing little text:

inserir a descrição da imagem aqui

Now, an example of how the text gets when it is a little larger, ie that exceeds the limit of my element:

inserir a descrição da imagem aqui

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

Now, how would you like it to look when the text drops to the bottom line:

inserir a descrição da imagem aqui

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

javascript html css
  • 1

    I imagine not... imagine, if this were possible you could end up going into CSS loop.

  • Paul, your question is confused. Organize the information, put practical examples and make your goal clearer.

  • I found your direct question, you want to use a conditional within the CSS. Reading this you will find your answer -> http://dev.w3.org/csswg/css-conditional/

  • I reformulated my question with some demonstrative images Caio. Maybe now I improve the understanding.

  • I think you better wear another technique to center the text vertically.

  • You certainly don’t need Javascript. There are MANY alternatives to vertical centering. Many. There are even fans of display: table!

  • The use of display:table; in the parent element, and the use of the vertical-align:Middle; and display:table-Cell; in the element containing the text, would be a good practice?

Show 2 more comments

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;
}

Take the example: http://jsfiddle.net/QPdLx/1/

3

Suggestion:

  • Decrease the line-heightof the text, leaving in the measure of your last image, where the text with line break appears beautiful.

  • Wrap this text in a div or other element, and apply vertical-align: middle the same. (Maybe you need a display: inline-block.)

  • In the all-encompassing element (date, text, padding), there yes, assign a line-height of the same height as height so that vertical alignment is applied.

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.