I'm new to React I want to make show more/show less button. When the text is not expanded the browser should show only 3 lines. I found a solution with array (ReactJS How to add a show more/show less button), but I want to do it with text. My question is how to show exactly 3 lines of text and expand it on button click.

I'm new to React I want to make show more/show less button. When the text is not expanded the browser should show only 3 lines. I found a solution with array (ReactJS How to add a show more/show less button), but I want to do it with text. My question is how to show exactly 3 lines of text and expand it on button click.

• javascript
• css
• reactjs
• typescript

• 1 if someone will have same problem, use npmjs./package/react-lines-ellipsis – Bob Smith Commented Mar 6, 2020 at 9:35
• Well. Instead of number of lines it should be character limit as device lines may change based on device. If you want to set it based on character limit, check out my answer here. stackoverflow./a/67073016/5782438 – Krishna Nigalye Commented Apr 14, 2021 at 5:27

4 Answers 4

You can use react-lines-ellipsis for the same by using npm install --save react-lines-ellipsis

  <LinesEllipsis
    text='long long text'
    maxLine='3'
    ellipsis='...'
    trimRight
    basedOn='letters'
  />

for more information

@IncrediblePony

I am using React. You don't need javascript etc. You can use in React add remove class. You can use like this.

.hide{
  width: 100%;
  line-height: 1.2em;
  height: 3.6em; 
  background-color: #363636;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

class App extends React.Component {
    state = {
        shown: true,
    };

    render() {      
        return (
            <div><h2 className={this.state.shown ? '' : 'hide'}>
It will ing long text here</h2><button onClick={() => this.setState({ shown: !this.state.shown })}>Show more</button></div>
        )
    }
}

const mountNode = document.getElementById('app');
React.render(<App />, mountNode);

You can use like this.

div {
  width: 100%;
  line-height: 1.2em;
  height: 3.6em;
  background-color: #363636;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

I found a simple example here: https://codepen.io/joshbivens/pen/LNLKor?editors=1010

I edited this to behave in such a way that the button toggles a long piece of text like so:

class App extends React.Component {
    state = {
        shown: true,
    };

    render() {      
        return (
            <div>
                <h2>{
                        this.state.shown ? 
                        "Bacon ipsum dolor amet brisket pancetta leberkas ..." : 
                        "Bacon ipsum dolor amet brisket pancetta leberkas, landjaeger shank tail capicola tri-tip meatball. Shankle pig jowl tail doner corned beef ham hock biltong pork belly burgdoggen pancetta. Cupim pork loin tongue pastrami. Ball tip corned beef strip steak salami, porchetta chicken pork chop shoulder capicola. Ball tip swine strip steak, ground round tail rump porchetta beef biltong pork chop sausage meatloaf drumstick. Short loin corned beef short ribs buffalo chislic sausage."
                    }</h2>
                <button onClick={() => this.setState({ shown: !this.state.shown })}>Show more</button>
            </div>
        )
    }
}

const mountNode = document.getElementById('app');
React.render(<App />, mountNode);

This is the basic principle behind it. You can modify your code to suit your needs with this I hope.