6

I am trying to show a long text in block of div and want that if a text exceed to div height then need to show a "..." otherwise fill a whole text in to a block. But problem is that, using css text-overflow:ellipsis will cut the whole long text into one line text and place these dots where more text can be written into in below space. 

<div  class="hide-long-text">

Now a long wooooooooooo ooooooooooooooooooooord 

.hide-long-text {
   height: 80px;
    width: 110px;
    border: 1px solid #adb8c0; 
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: nowrap;
}

here is a fiddler link Can someone give me a hint how i can use this free space and when text exceed the div height then show "..."

user565
  • 871
  • 1
  • 22
  • 47

1 Answers1

19

Please try the code:

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    div {
      width: 200px;
      height: 100px;
      line-height: 20px;
      word-break: break-all;
      background-color: skyblue;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      -ms-box-orient: vertical;
      box-orient: vertical;
      -webkit-line-clamp: 5;
      -moz-line-clamp: 5;
      -ms-line-clamp: 5;
      line-clamp: 5;
      overflow: hidden;
 }
  </style>
</head>
<body>
  <div> hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!</div>
</body>
Dharmesh Vekariya
  • 1,138
  • 2
  • 13
  • 31
Eric.D
  • 261
  • 1
  • 3
  • 8
  • Although -webkit-line-clamp works in this case. It is limited to 5 lines in this example. So make sure when you use it, the height is fixed and the line-height matches. For support across browsers see. [CSS-Tricks - line-clamp](https://css-tricks.com/almanac/properties/l/line-clamp/). More answers are in this question [With CSS, use “…” for overflowed block of multi-lines](https://stackoverflow.com/questions/6222616/with-css-use-for-overflowed-block-of-multi-lines) – Roy Scheffers Aug 13 '18 at 07:45
  • 4
    some explanation about the css attributes might help – Ismail Jun 18 '19 at 13:34
  • Unfortunately, applying padding throws this approach off. You can work around it by adding a container element and adding padding to the container. – squidbe Feb 13 '23 at 19:54