[FIXED] How to show three dots after few text showing, if no space in div using css and in Reactjs component

Issue

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

rel="nofollow noreferrer">

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

Solution

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

Answered By - KARTHIKEYAN.A
Answer Checked By - - Marie Seifert (ReactFix Admin)