reactjs - React:如何包装输入文本?
问题描述
我有一个用 material-ui 编写的 React 表,如下所示:
import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
const styles = theme => ({
root: {
width: "100%",
marginTop: theme.spacing.unit * 3,
overflowX: "auto"
},
table: {
minWidth: 700
}
});
let id = 0;
function createData(name, calories, fat, carbs, protein) {
id += 1;
return { id, name, calories, fat, carbs, protein };
}
const rows = [
createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
createData("Eclair", 262, 16.0, 24, 6.0),
createData("Cupcake", 305, 3.7, 67, 4.3),
createData("Gingerbread", 356, 16.0, 49, 3.9)
];
function SimpleTable(props) {
const { classes } = props;
return (
<Paper className={classes.root}>
<Table className={classes.table}>
<TableHead>
<TableRow>
<TableCell>Dessert (100g serving)</TableCell>
<TableCell align="right">Calories</TableCell>
<TableCell align="right">Fat (g)</TableCell>
<TableCell align="right">Carbs (g)</TableCell>
<TableCell align="right">Protein (g)</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map(row => (
<TableRow key={row.id}>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="right">
<input defaultValue={row.calories}/>
</TableCell>
<TableCell align="right">{row.fat}</TableCell>
<TableCell align="right">{row.carbs}</TableCell>
<TableCell align="right">{row.protein}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Paper>
);
}
SimpleTable.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(SimpleTable);
我的一些表格单元格有<input />
s (这里只是calories
因为它是一个例子)。如果输入中的文本比输入长,如何让输入中的文本换行?目前,它将其他文本推开并隐藏。
解决方案
您可以使用 css 属性overflowWrap: "break-word"
。阅读更多关于它的信息https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
推荐阅读
- android - 当我退出我的应用程序时服务停止
- google-api-client - 如何要求 google api 客户端
- angular - 我尝试使用 Angular 4,但我无法映射函数以将响应映射到 json
- pandas - 熊猫 to_csv 跳过数据帧的第一行
- html5-video - 如何在 html5 视频播放器中打开 Autodesk BIM360 视频文件?
- google-cloud-platform - 谷歌云虚拟机位置
- git - git推送错误信息
- php - 将变量插入 MySQL 数据库表
- c# - 使用 TABLE_ENTRIES_GET_VIA_RFC 从 SAP 获取数据到 C#
- linux - Jenkinsfile 环境变量不反映在脚本部分中调用的 Makefile