0

I would like to display some text in a simple div that has a flexible width (width is set to % of parent container).

Sometimes text is too long to be displayed in the correct way so I want to parametrize how many rows it could have.

The rest of the text should be cut, and after the last word that can be displayed there should be ....

For example if the text is my simple example text that should be displayed in the custom div by using css

and the parameter of numberOfRows is set to 1 it should look like: my simple example text...

and if then parameter of numberOfRows is set to 2 it should look like:

my simple example text
that should be display...

My current container is just a div but if it is necessary it could be anything:

    <div class="simplyText">
        my simple example text that should be display in the custom div by using css
    </div>

How is it possible to do that?

CYr
  • 349
  • 4
  • 17
Rash J
  • 133
  • 1
  • 9
  • 1
    What you're asking cannot be done in HTML and CSS alone. You will need JavaScript to gain the functionality that you seek. So if you came looking for a pure CSS solution, then I'm afraid that's not possible. If you're not shy of a possible JavaScript solution, then add that to the question as well. – Martin Jun 30 '20 at 17:04
  • 1
    If it is the only way, the js solution will be great – Rash J Jun 30 '20 at 17:08
  • @RashJ have you tried taking a look at https://stackoverflow.com/questions/33058004/applying-an-ellipsis-to-multiline-text ? – Kristaps Jun 30 '20 at 17:20

2 Answers2

0

With css you can work around but you have to incorporate width property with it and ellipsis can help you with rest of the stuff

p {
  width: 200px;
  /* BOTH of the following are required for text-overflow */
  white-space: nowrap;
  overflow: hidden;
}

.overflow-ellipsis {
  text-overflow: ellipsis;
}
<p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

If you want to do that with javascript which is the recommended way then few line of code is required here.

function truncate (str) {
    if (str.length > 15) {  // check if para length is more than 15
        return (str.substring(0, 11) + "..."); // Then truncate after 11th letter
    }
    else {
    return str;
}
}

var div = document.getElementById('mydiv');  // getting your div content here
div.textContent = truncate(div.textContent); // result after truncate
<div id="mydiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
Fareed Khan
  • 2,613
  • 1
  • 11
  • 19
0
.max-lines {
  display: block;/* or inline-block */
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 3.6em;
  line-height: 1.8em;
}

You could use this concept to display some lines of the whole paragraph,

where max-height: = line-height: × in em.

refer to this answer: Limit text length to n lines using CSS

and to display the whole paragraph, you can use onclick functionality to call a Javascript function that removes this CSS

VR7
  • 112
  • 3
  • 16