超出屏幕右边界时 HTML 元素被截断

Posted 2023-02-22

【中文标题】超出屏幕右边界时 HTML 元素被截断

【英文标题】：HTML element is cut off when exceeding right boundary on screen

【发布时间】：2018-05-11 16:15:57

【问题描述】：

我有一个网站，我使用表格来显示一些数据。问题是当我在较小的屏幕上查看网站时，表格被截断，并没有显示所有内容。您可以在下面看到，尽管我一直向右滚动，但最右侧的字段几乎不可见并被屏幕截断。

我似乎可以通过根中的宽度 css 参数部分解决此问题，但如果我将宽度设置得太高，只会增加不必要的右边距。

import React  from 'react';
import ListUsersTableRow from "./listUserTableRow";
import  withStyles  from 'material-ui/styles';
import Table,  TableBody, TableCell, TableHead, TableRow  from 'material-ui/Table';
import Paper from 'material-ui/Paper';

const styles = theme => (
  root: 
    [theme.breakpoints.up('md')]: 
      width: `calc(100% - 140px)`,
    ,
    marginTop: theme.spacing.unit * 3,
    overflowX: 'auto',
  ,
  table: 
    minWidth: 700,
  ,
);

export const ListUsersTable = (props) => 
  const  classes  = props;
  return (
    <Paper className=classes.root>
      <Table className=classes.table>
        <TableHead>
          <TableRow>
            <TableCell>Edit</TableCell>
            <TableCell>Full name</TableCell>
            <TableCell>Username</TableCell>
            <TableCell>Email</TableCell>
            <TableCell>Company</TableCell>
            <TableCell>Contact Number</TableCell>
            <TableCell>Role</TableCell>
            <TableCell>Status</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          props.users.map(user => <ListUsersTableRow key=user.id ...user toggleEdit=props.toggleEdit/>)
        </TableBody>
      </Table>
    </Paper>
  )
;

export default withStyles(styles)(ListUsersTable);

【问题讨论】：

左边的菜单是画布外的菜单吗？似乎打开的菜单将页面推出视图。 （如果是，这是预期的行为）

是的，它确实推出了内容。但是，如果我将宽度设置为 100%-240px（抽屉的宽度），我会在右侧得到一个很大的间隙

菜单中是否有任何 CSS 规则会影响内容的正文或某些包装元素？它可能会添加 padding-left。以前从未使用过 100%-xxx 计算，因此不知道它是否应该工作。

我想这是因为你有一个tableminWidth: 700，不管你发布一个工作的sn-p会更好

当然，你能指出我支持 3rd 方 npm 包（如材料设计）的 sn-p 工具的方向吗？

【参考方案1】：

min-width 导致您的表格至少宽至 700。

尝试一些简单的东西，比如 width: 100%;

如果宽度：100%；弄乱您的侧边菜单，您可能需要考虑将菜单的宽度设置为 30% 而不是 240 像素。由于您的菜单占据了页面的 30%，而您的餐桌占据了另外 70%，因此 应该 更合适一些。

不过，没有实际示例的粗略猜测。

【讨论】：

谢谢，30% 的菜单宽度在大屏幕上可能看起来很有趣。有没有什么好的工具可以在浏览器中显示一个工作示例？

我个人只使用 Chrome 开发工具。如果您右键单击您的页面，请在您要修改的元素上单击“检查”。您的代码应显示在“元素”下。您无法在此处进行永久性代码更改，但您可以篡改现有代码并查看内容是否适合。例如，您应该能够右键单击，检查您的表格，然后在网页上输入您的尺寸并立即反馈