Question

我是React的新手，我想显示更多/更少显示按钮。当文本未展开时，浏览器应仅显示3行。我找到了一种使用数组（ReactJS How to add a show more/show less button）的解决方案，但我想使用文本。我的问题是如何准确显示三行文字并在单击按钮时将其展开。

Answer 1

您可以使用.sql来使用react-lines-ellipsis

npm install --save react-lines-ellipsis

for more information

Answer 2

您可以这样使用。

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;
}

Answer 3

我在这里找到了一个简单的示例：https://codepen.io/joshbivens/pen/LNLKor?editors=1010

我对此进行了编辑，使其具有如下功能：按钮可以像这样切换较长的文本：

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);

这是其背后的基本原理。我希望您可以根据自己的需要修改代码。

Answer 4

@IncrediblePony

我正在使用React。您不需要javascript等。您可以在React中使用add remove类。您可以这样使用。

.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 coming 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);

显示更多/显示更少文本

4 个答案: