I am attempting to break a sentence across four line, I have found a few articles mentioning line-clamp, but either I am misunderstanding it or there is slightly more too it.

Here is the div:

<div class="line-clamp">
The folks on stackoverflow are very helpful
</div>

and my css

.line-clamp {
   display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;  
}

I have also dropped it in a codepen for testing: https://codepen.io/markwow/pen/gOderYM

I’m hoping this is something simple that I am just confusing, appreciate the help!

>Solution :

<p>
  In this example the <code>-webkit-line-clamp</code> property is set to
  <code>3</code>, which means the text is clamped after three lines. An ellipsis
  will be shown at the point where the text is clamped.
</p>

p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

You miss the width property to limit the text,so the width is auto, to fix your issue,you can do the following:

.line-clamp {
   display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; 
  width:100px;
  overflow:hidden;
}