11

I have a div that contains an image and text. If the text takes up only one line, I want the text to be vertically aligned to the center of the image. If the text takes up more then one line of text, I want the top of the text to be aligned with the top of the image.

Does CSS have a way of detecting when text wraps to the next line?

Jon
  • 8,205
  • 25
  • 87
  • 146
  • no, css can't detect such things. it is only a styling language and has not potential for decision making – Sven Bieder Jan 21 '13 at 19:43
  • @SvenBieder Thank you. That is what I thought. Can you post your response so I can accept it as an answer. – Jon Jan 21 '13 at 19:44
  • If you use jQuery, you can count the lenght of your text and make a condition that applies a class. if ($('yourdiv').text().length < 100) {$(this).addClass('small')} else {....} – Ricardo Castañeda Jan 21 '13 at 19:59

2 Answers2

8

No, CSS can't detect such things. It is only a styling language and has no potential for making decisions.

Sven Bieder
  • 5,515
  • 2
  • 21
  • 27
  • 14
    while this is right for single/multi line, CSS can make desicions. media queries and `:empty` are good examples of CSS making decisions what's happening in the browser. In general every pseudo-class is CSS making decisions. Find a List of Pseudo-Classes here: https://developer.mozilla.org/de/docs/Web/CSS/Pseudo-classes I hope they add a pseudo-class like `:single-line` or `:text-wrap` sometime. – ProblemsOfSumit Jun 16 '14 at 10:28
2

No, this is not possible. However, it is possible to prevent words from "wrapping," or going over to the next line. although this functionality is not fully supported by all browsers. This is called word-wrap.

Charles
  • 4,372
  • 9
  • 41
  • 80
  • I need the text to wrap though, but thank you for providing an alternative solution. – Jon Jan 21 '13 at 19:51