How can I cut long text according to available div area size?


Tags: javascript,css,html5

Problem :

I have a text and preview div area. Whenever I have put long text on the div area, it is overflowed out of div area. I have tried text-wrap:normal, but it does not cut the context and showed only what text fit to the available area.

How can I cut long text according to available div area size? Afterwards, I will put css read more button to end of preview text area.



Solution :

Use text-overflow: ellipsis;, that when combined with overflow: hidden and one-line technique white-space: nowrap adds a ... at the end of the text, containing it within the parent's width:

div {
  overflow: hidden;
  width: 100px;
  white-space: nowrap;
  text-overflow: ellipsis;
  float: left;
}
<div>
  my very long text is here my very long text is here
</div>
<a href="">[Continue to read]</a>


    CSS Howto..

    How to make a double color single border using css?

    wordpress submenu css show on parent active and child active

    How to add offset border to image of unknown size?

    How do you replicate this box-shadow effect?

    How to invert the anchoring inside a `
    ` to the bottom instead of the top?

    how can i add class to errorsummay without remove header message

    How to achieve straight shadow with CSS?

    how to load the content onclik menu?

    How to make semi-transparent background [duplicate]

    How do i select rows that correspond to a rowspan?

    How to make 2 backgrounds “stick” to the sides of a centered div

    How can I get this CSS to display properly in IE8?

    How do I give one stylesheet precedence over the other with Rails?

    How to see the style of the thumb of range input in Chrome developer tools?

    How to make div position fixed without floating

    How can I select the first paragraph in this code?

    How to set content area div height with dynamic header div

    How to conditionally load CSS

    How to arrange dissimilar
    elements to flow inline inside an
    element

    How to match element containing another element?

    SharePoint 2007 popup rich text editor displays corporate logo from master page - how can I remove this?

    how to remove space in TR and TD

    How can I center vertically a div with position absolute and hight = 100px on another div with position relative but with not standard height

    How to create a border gap illusion

    How to apply a responsive CSS height to an element using min/max-height and height?

    How to remove an element without id

    how to scale img by percentage of self and not percentage of its container

    How to make application browser compatible

    How to apply css using ng-class in angularjs

    How to set the background-image of this text to an svg?