-2

Am trying to create an overview for blog posts with some first few words from the post then when clicked the full post opens but since I don't want to write any back end code for that am wondering if theres and HTML feature for that.

Update

I am not asking how to handle overflows like I see in the answers. Am asking if theres a construct in HTML that can allow one show like 50 words if for example there where a thousand just like and overview.

Community
  • 1
  • 1
Fenn-CS
  • 863
  • 1
  • 13
  • 30
  • Downvoted because I was able to find the answer to this question with a few seconds of internet searching, which probably means you did not try the same thing. – pabrams Jan 16 '17 at 22:18
  • Are you sure you're not asking how to handle overflows? – pabrams Jan 16 '17 at 22:52
  • 1
    Possible duplicate of [Setting a max character length in css](http://stackoverflow.com/questions/26973570/setting-a-max-character-length-in-css) – Serlite Jan 16 '17 at 22:53

2 Answers2

0
<div id="greetings">
  Hello universe!
</div>

#greetings{
  width: 100px
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis
}

If browser is compatible, you should get something like

Hello univ…

showing on page.

Ref: http://www.w3schools.com/cssref/css3_pr_text-overflow.asp

pabrams
  • 1,157
  • 10
  • 34
  • You got my question wrong am trying to cut down word not prevent and overflow. Am asking if its possible to for example choose to show 50 words if the were 1000. – Fenn-CS Jan 16 '17 at 22:35
  • @F.ENoelNfebe No, I don't think there's a css or Html way to do that. If you want a specific number of words, you'd have to write some code (e.g. JavaScript). But why would you want an exact number of words instead of just filling the available space? Will your users be upset if you don't display exactly 50 words? – pabrams Jan 16 '17 at 22:45
0

Here are two mixins (on .sass):

=ellipsis
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

=ellipsis-multi($lines: 2)
  overflow: hidden
  display: -webkit-box
  -webkit-line-clamp: $lines
  -webkit-box-orient: vertical

and you're using it:

.title
    +ellipsis-multi(3)

Or just in css

.title {
  overflow: hidden
  display: -webkit-box
  -webkit-line-clamp: 3
  -webkit-box-orient: vertical
}
Darex1991
  • 855
  • 1
  • 10
  • 24