Question

我已经使这个元素成为如果值prop文本溢出其元素，它将不可见。但是，我需要这样做，如果发生溢出，我取最后三个字符并用“......”替换它们。因此，例如，value =“这是一个例子”，但“示例”溢出（“这是一个”是唯一显示的东西）。我需要显示“这是......”，因为三个点必须占用空间。如果我需要澄清，请告诉我，谢谢！

tsx文件：

import * as React from 'react';
import "./DispalyValueControl-styles.scss"

export interface DisplayValueControlProps {
    value: string;
    label: string;
}

export class DisplayValueControl extends React.Component<DisplayValueControlProps, any> {

    render() {
        return (
            <div className="display-value">
                <div className="value"> {this.props.value} </div>
                <div className="info-label"> {this.props.label} </div>
            </div>
        );
    }
}

的CSS：

.display-value {    
    >.value {
        color: #444444;
        margin-bottom: 0px;
        padding-bottom: 0px;
        font-size: 22px;
        overflow: hidden;
        white-space: nowrap;
    }

Answer 1

您可以使用CSS的text-overflow : ellipsis;属性。

但是，除此之外，您还需要添加overflow和white-space属性才能生效

例如：

.display-value {    
    >.value {
        color: #444444;
        margin-bottom: 0px;
        padding-bottom: 0px;
        font-size: 22px;
        text-overflow : ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

查看browser compatibility here （对于某些版本的IE和Opera，您可能需要分别使用-ms-text-overflow和-o-text-overflow，如上面的链接所示。）

检测打字稿中的文本溢出

1 个答案: