在本文中,我们将学习怎样在 reactJS 中把文本复制到剪贴板。
首先,用以下命令创建一个 React App。
npx create-react-app platform
然后在 Visual Studio Code 中打开新创建的项目,并使用以下命令安装 Bootstrap:
npm install --save bootstrap
打开 index.js 文件并导入Bootstrap。
import 'bootstrap/dist/css/bootstrap.min.css';
以下命令安装 copy-to-clipboard 库:
npm install save copy-to-clipboard
进入到 src 文件夹,创建一个名为 CopyBoard.js 的新组件,并在此组件中添加以下代码。
import React, { Component } from 'react'
import copy from "copy-to-clipboard";
import './CopyBoard.css';
export class CopyBoard extends Component {
constructor() {
super();
this.state = {
textToCopy: "Copy to Clipboard Demo!",
};
this.handleInputChange = this.handleInputChange.bind(this);
this.Copytext = this.Copytext.bind(this);
}
handleInputChange(e) {
this.setState({
textToCopy: e.target.value,
});
}
Copytext() {
copy(this.state.textToCopy);
}
render() {
const { textToCopy, btnText } = this.state;
return (
<div className="container">
<div class="row" className="hdr">
<div class="col-sm-12 btn btn-info">
Copy to Clipboard Demo
</div>
</div>
<div className="txt">
<textarea className="form-control" placeholder="Enter Text" onChange={this.handleInputChange} />
<br />
<br />
<button className="btn btn-info" onClick={this.Copytext}>
Copy to Clipboard
</button>
</div>
</div>
);
}
}
export default CopyBoard
接下来创建一个新的CSS文件,并在该文件中添加以下CSS。
.txt
{
margin-bottom: 20px;
margin-top: 20px;
}
.hdr
{
margin-top: 20px;
}
现在,打开 App.js 文件并添加以下代码:
import React from 'react';
import logo from './logo.svg';
import './App.css';
import CopyExample from './CopyBoard';
function App() {
return (
<div className="App">
<CopyExample/>
</div>
);
}
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。
在我们的日常开发工作中,文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ,但在实现上却有不同的区分,是单行截断还是多行截断?多行的截断判断是基于行数还是基于高度?这些问题之下,都有哪些实现方案?
CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。下面我们来看一下css如何设置文本超出几行显示省略号。
通过css可以使对应div标签内的文字换行或不换行设置操作,那么该如何设置不换行呢?下面我们来看一下css中不换行的代码是什么?
多行文本超过指定行数隐藏超出部分并显示“...查看全部”是一个常遇到的需求,网上也有人实现过类似的功能,不过还是想自己写写看,于是就写了一个Vue的组件,本文简单介绍一下实现思路。
文本溢出我们经常用到的应该就是text-overflow:ellipsis了,相信大家也很熟悉,但是对于多行文本的溢出处理确接触的不是很多,最近在公司群里面有同事问到,并且自己也遇到过这个问题,所以专门研究过这个问题。
经常可以看到某些网站网页上的文字无法被选中,出了js控制,通过CSS样式user-select和z-index两个属性都可导致无法复制文字;user-selectuser-select
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!