检测打字稿中的文本溢出

问题描述：

我制作了这个元素，使得如果值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; 
    }

答

您可以使用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如上面提到的链接）。

检测打字稿中的文本溢出

相关推荐