检测打字稿中的文本溢出

Question

我已经制作了这个元素，如果 value prop 文本溢出它的元素，它将不可见。但是，我需要这样做，如果发生溢出，我将最后三个字符替换为“...”。因此，例如，value="This is an example" 但 'example' 溢出（"This is an" 是唯一显示的内容）。我现在需要显示 "this is..."，因为三个点必须占用 space。如果我需要澄清，请告诉我，谢谢！

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。
（如上文link所述，某些版本的IE和Opera可能需要分别使用-ms-text-overflow和-o-text-overflow。）

检测打字稿中的文本溢出

Detecting text overflow in typescript

html

javascript

css

overflow

reactjs