CODEWITHSUNDEEP
javascriptjqueryhtmlcsshyphenator
Rayudu
Rayudu

Reputation: 1816

find no of rows for text break lines in div

Is there any way to find the number of lines for the text break with word-break:break-all css property. Like suppose I given one div as 

<div>Sample text to verify how many lines the text got broken</div>

And css is

div{
  width: 100px;
  word-break: break-all;
}

And now the browser will display like below and I want to know how many lines it got broken from the text.

Please help me how to achieve this.

enter image description here

Upvotes: 0

Views: 439

Answers (3)

Bhuwan
Bhuwan

Reputation: 16855

If you want to use hyphens at the word break you can use hyphens css.

Stack Snippet

div {
  max-width: 150px;
  hyphens: auto;
  margin:auto;
}

p {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
<div>
  <p>Now in some circumstances, designers may use squares and rectangles to help you visualize what should and could be in a specific location.</p>
</div>

But this solution has some browser support issue.

I found a helpful article for this CSS hyphens

Upvotes: 0

Liam
Liam

Reputation: 51

You could calculate the size of the container against the line height:

var getLines = function ($container) {
    var linehight = parseFloat(window.getComputedStyle($container[0], null).getPropertyValue("line-height"), 10);
    var boxHeight = $container.height();
    var numberOfLines = Math.round(boxHeight / linehight);
    return numberOfLines;
};

//To use it just call the function and pass in your class/selector
var numberOfLines = getLines($('.my-container'));

Upvotes: 3

ryangoree
ryangoree

Reputation: 1934

If you know the line height and any other styles affecting the height, you could check the offsetHeight of the paragraph. After getting the height, subtract anything that is from the CSS then divide by your line height.

Disclaimer: I’m typing this from my phone and have not tested.

Upvotes: 1

Related Questions