タイスクリプトでのテキストのオーバーフローの検出

Question

私は、値propテキストが要素からオーバーフローしても表示されないように、この要素を作成しました。ただし、オーバーフローが発生した場合は、最後の3文字を「...」に置き換えるようにする必要があります。たとえば、value = "This is an example"ですが、 'example'がオーバーフローしています（「This is an only」が表示されます）。私は3つの点がスペースを取らなければならないので、 "これは..."と表示する必要があります。私は明確にする必要がある場合はお知らせください、ありがとう！

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;プロパティを使用することができます。

.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を：それは

例：有効にするために

しかし、それに伴って、あなたもoverflowとwhite-spaceプロパティを追加する必要があります。
（上記のリンクに記載されているIEとOperaのバージョンによっては、それぞれ-ms-text-overflowと-o-text-overflowを使用する必要があります）