如果使用 css 的 div 和 Reactjs 组件中没有空格，如何在显示少量文本后显示三个点

Question

how to show three dots if space excided the text in css. when increase we need to show the character without effecting sibliing compoenent.

I'm trying something below

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

I have missed some properties and added later which are over-flow: hidden and white-space: 'nowrap'

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

Implemented Component

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>)}
        </>
    )
}