Question

当跨度中的内容超过溢出值时，我仅对一种类型的项目应用溢出省略号。

我想做什么？
我有物品通知清单。对于一种类型的通知“消息”，我需要向其添加溢出省略号。我已经尝试过类似下面的操作，但是不起作用。

class main extends React.Purecomponent {
    constructor(props) {
    super(props);
    this.comment_ref = React.createRef();
}

componentDidMount() {
    if (this.props.notification.type === 'comment') {
        this.set_overflow_class();
    }
}

componentDidUpdate(prevProps) {
    if (prevProps.notification.id !== this.props.notification.id && 
        this.props.notification.type === 'comment') {
        this.set_overflow_class();
    }
}

set_overflow_class = () => {
    const element = this.comment_ref.current;
    console.log("comment ref", element);
    if(element.scrollWidth > element.clientWidth) {
        element.classList.add('overflowing');
    }
};

switch(notification.type) {
case 'uploaded':
    return (
        <ListItem icon={<Svg/>} text={name + 
        'created item' + item.name} timestamp={timestamp}>
            <div className="image">
                <Image
                    width={70}
                    height={70}
                    item_id={item.id}
                />
            </div>
        </ListItem>
    );
case 'comment':
    return (
        <ListItem icon={<Svg/>} text={name + 
           'commented item' + item.name} ref={this.comment_ref} 
            className="span" timestamp= {timestamp}>
        </ListItem>
    );

function ListItem(props) {
    return (
        <li className="item">
            <div className="details">
                {props.icon}
                <span ref={props.ref} className={props.className}>{props.text} 
                </span>
            </div>
            {props.children}
            <Timestamp>{props.timestamp}</Timestamp>
        </li>
    );
}

，但是会引发错误：cannot set scrollwidth of undefined。似乎无法识别span元素。

Answer 1

我通过添加文本溢出：省略号css规则找到了答案。

像下面一样，

<div class="earth">
  <div class="orbit">
    <div class="moon"></div>
  </div>
</div>

function ListItem（props）{ 返回（ {props.icon} {props.text} {props.children} {props.timestamp} ）; }

case 'comment':
    return (
        <ListItem icon={<Svg/>} text={name + 
            'commented item' + item.name} 
             className="additional_details" timestamp= {timestamp}>
        </ListItem>
   );

如何使用CSS和React将溢出省略号添加到元素？

1 个答案: