如果使用 css 的 div 和 Reactjs 組件中沒有空格，如何在顯示少量文本后顯示三個點

Question

如果空格超出 css 中的文本，如何顯示三個點。當增加時，我們需要在不影響兄弟組件的情況下顯示字符。

我正在嘗試下面的東西

import React from 'react'
import Tooltip from '@material-ui/core/Tooltip'
import Typography from '@material-ui/core/Typography'
import { makeStyles, createStyles, withStyles } from '@material-ui/core/styles'
import { Divider } from '@material-ui/core'
import { Link, Paper } from '@material-ui/core'
import { ErrorOutlineOutlinedIcon } from '../../icon'


const HtmlTooltip = withStyles(theme => ({
    arrow: {
        '&::before': {
            color: 'white'
        }
    },
    tooltip: {
        backgroundColor: '#f5f5f9',
        boxShadow: theme.shadows[8],
        color: 'rgba(0, 0, 0, 0.87)',
        fontSize: 14,
        maxWidth: 800,
        padding: 0,
    },
    tooltipPlacementTop: {
        margin: '4px 0',
    },
}))(Tooltip)
const imageStyles = { root: { color: 'deeppink', height: 20, marginBottom: 0, width: 20 } }

const Image = withStyles(imageStyles)(({ classes }) => (
    <ErrorOutlineOutlinedIcon classes={classes} />
))
const useStyles = makeStyles(theme =>
    createStyles({
        content: {
            border: `1px solid ${theme.palette.grey[300]}`,
            margin: 0,
            minWidth: 600,
            padding: 0,
            zIndex: 1,
        },
        contentInner: {
            padding: theme.spacing(1)
        },
        header: {
            backgroundColor: 'deeppink',
            fontWeight: 'bold',
            padding: theme.spacing(1),
        }
    })
)
export default function CustomTooltip(params) {
    const classes = useStyles()
    const action = [ {
        content: '<pre>Check Delhi in India or not</pre>',
        name: 'Check Delhi in India or not',
        value: <pre>Check Delhi in India or not</pre>
    } ]
    const textDispaly = action.some(c => c.content === params.value) ? action.find(c => c.content === params.value).value : params.value
    const labelDisplay = action.some(c => c.content === params.value) ? action.find(c => c.content === params.value).name : params.value

    return (
        <>
            {labelDisplay && labelDisplay.length > 20 ? (<HtmlTooltip arrow interactive title={
                <Paper className={classes.content}>
                    <div className={classes.header}>
                        <Typography color='inherit' variant='body1' style={{color: 'white', fontSize: '16px'}}>
                            {params.column.colDef.headerName}
                        </Typography>
                    </div>
                    <Divider />
                    <div className={classes.contentInner}>
                        {textDispaly}
                    </div>
                </Paper>}
            placement='top'
            >
                <div style={{ alignItems: 'center', display: 'flex', fontSize: '14px', justifyContent: 'space-between' }}>
                    <div style={{textOverflow: 'ellipsis'}}>{labelDisplay}</div><Image/>
                </div>
            </HtmlTooltip>) : (<div style={{textOverflow: 'ellipsis'}}>{labelDisplay}</div>)}
        </>
    )
}

Answer 1

我錯過了一些屬性，后來添加了溢出的屬性：隱藏和空白：'nowrap'

<div style={{overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}>{labelDisplay}</div>

實現組件

import React from 'react'
import Tooltip from '@material-ui/core/Tooltip'
import Typography from '@material-ui/core/Typography'
import { makeStyles, createStyles, withStyles } from '@material-ui/core/styles'
import { Divider } from '@material-ui/core'
import { Link, Paper } from '@material-ui/core'
import { ErrorOutlineOutlinedIcon } from '../../icon'


const HtmlTooltip = withStyles(theme => ({
    arrow: {
        '&::before': {
            color: 'white'
        }
    },
    tooltip: {
        backgroundColor: '#f5f5f9',
        boxShadow: theme.shadows[8],
        color: 'rgba(0, 0, 0, 0.87)',
        fontSize: 14,
        maxWidth: 800,
        padding: 0,
    },
    tooltipPlacementTop: {
        margin: '4px 0',
    },
}))(Tooltip)
const imageStyles = { root: { color: 'deeppink', height: 20, marginBottom: 0, width: 20 } }

const Image = withStyles(imageStyles)(({ classes }) => (
    <ErrorOutlineOutlinedIcon classes={classes} />
))
const useStyles = makeStyles(theme =>
    createStyles({
        content: {
            border: `1px solid ${theme.palette.grey[300]}`,
            margin: 0,
            minWidth: 600,
            padding: 0,
            zIndex: 1,
        },
        contentInner: {
            padding: theme.spacing(1)
        },
        header: {
            backgroundColor: 'deeppink',
            fontWeight: 'bold',
            padding: theme.spacing(1),
        }
    })
)
export default function CustomTooltip(params) {
    const classes = useStyles()
    const action = [ {
        content: '<pre>Check Delhi in India or not</pre>',
        name: 'Check Delhi in India or not',
        value: <pre>Check Delhi in India or not</pre>
    } ]
    const textDispaly = action.some(c => c.content === params.value) ? action.find(c => c.content === params.value).value : params.value
    const labelDisplay = action.some(c => c.content === params.value) ? action.find(c => c.content === params.value).name : params.value

    return (
        <>
            {labelDisplay && labelDisplay.length > 20 ? (<HtmlTooltip arrow interactive title={
                <Paper className={classes.content}>
                    <div className={classes.header}>
                        <Typography color='inherit' variant='body1' style={{color: 'white', fontSize: '16px'}}>
                            {params.column.colDef.headerName}
                        </Typography>
                    </div>
                    <Divider />
                    <div className={classes.contentInner}>
                        {textDispaly}
                    </div>
                </Paper>}
            placement='top'
            >
                <div style={{ alignItems: 'center', display: 'flex', fontSize: '14px', justifyContent: 'space-between' }}>
                    <div style={{overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}>{labelDisplay}</div><Image/>
                </div>
            </HtmlTooltip>) : (<div style={{overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}>{labelDisplay}</div>)}
        </>
    )
}