“text-overflow” property to truncate long texts – CSS3


.short_text {
  width: 252px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam blandit in dolor non dapibus. Suspendisse potenti. In libero sem, consequat non tellus nec, viverra commodo lorem. Fusce ac quam mattis, consectetur diam ut, facilisis diam.

:nth-child() Selector – CSS3

:nth-child

li:nth-child(5) {
    background-color: #ff00ff;
}

Using :nth-child(5) it allows you to specifically choose to change only the 5th element in the parent element.

Example:

  • Some Text Here
  • Some Text Here
  • Some Text Here
  • Some Text Here
  • Some Text Here
  • Some Text Here
  • Some Text Here
Positive Child Ranges

li:nth-child(n+5) {
    background-color: #ffff00;
}

Using the :nth-child(n+5) like this allows you pick :nth-child(5) and above.

Example:

  • Some Text Here
  • Some Text Here
  • Some Text Here
  • Some Text Here
  • Some Text Here
  • Some Text Here
  • Some Text Here
Negative Child Ranges

li:nth-child(-n+5) {
    background-color: #ff0000;
}

Using the :nth-child(-n+5) like this allows you pick :nth-child(5) and below.

Example:

  • Some Text Here
  • Some Text Here
  • Some Text Here
  • Some Text Here
  • Some Text Here
  • Some Text Here
  • Some Text Here