反応でオーバーフローテキストコンテンツを非表示にする方法
jpskgc
グリッドコンポーネントをオーバーフローするテキストを非表示にする機能を実装しようとしています。
しかし、それでもテキストは隠されていません。したがって、この機能を実装する方法を知りたいです。
フロント：React
cssフレームワーク：semantic-ui-react
ターゲットコードは次のとおりです。
render() {
return (
<Container style={{marginTop: '3em'}} text>
<Grid columns={1} divided="vertically">
<Grid.Row>
{(this.state.articleDatas || []).map(function(articleData, i) {
return (
<Grid.Column>
<Segment>
<Header as="h1">{articleData.title}</Header>
<p style={{textOverflow: 'clip'}}>
{articleData.content.length > 100
? articleData.content.substring(0, 97) + '...'
: articleData.content}
</p>
</Segment>
</Grid.Column>
);
})}
</Grid.Row>
</Grid>
</Container>
);
}
画面の現在の状態です。https://s19.aconvert.com/convert/p3r68-cdx67/gpext-9x16c.gif
オーバーフローしたテキストを自動的に非表示にして、下の図のようにコンポーネントを拡大または短縮したい。
完全なソースコードはここにあります：https：
//github.com/jpskgc/article/blob/master/client/src/components/List.tsx
オーバーフローしたテキストは非表示になると思います。
しかし、実際はそうではありません。だから私はそれを隠す方法を知りたいです。
マムン
word-breakCSSでプロパティを試すことができます。クラスmyElementの要素を考えてみましょう：
.myElement {
word-break: break-all;
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
オーバーフローコンテンツのない要素のスクロールバートラックを非表示にする
- 2
（反応）ホバー時にコンテンツを非表示にすることはできませんか？
- 3
オーバーフローをスクロール/非表示に設定すると、：before内のコンテンツが非表示になります
- 4
コンテナオーバーフローが非表示のときにツールチップを表示する
- 5
JavaFXでオーバーフロー時にテキストを非表示にする方法は？
- 6
コンテキストルートを非表示にする方法
- 7
Androidでコンテンツを上にスクロールするときにツールバーを非表示にする方法
- 8
Androidでコンテンツを上にスクロールするときにツールバーを非表示にする方法
- 9
Androidでコンテンツを上にスクロールするときにツールバーを非表示にする方法
- 10
フローティングツールヒントテキストをポリゴンに表示する方法
- 11
マウスオーバーでコンテンツをフェードインし、マウスアウトで非表示にします
- 12
コンテンツではなくスクロールバーを非表示にする
- 13
Extendscript：テキストコンテンツが含まれている長方形をオーバーフローするかどうかを確認する方法
- 14
マウスオーバーに反応して他のdivのコンテンツを取得する
- 15
オーバーフローしたコンテンツ、列でフレックスアイテムをスクロール可能にする方法
- 16
オーバーフロー:オートでオーバーフローしたコンテンツの自動カットを回避する方法は?
- 17
HTMLでオーバーフローしたテキストの中央を非表示にする
- 18
コンテキストアクションバーのオーバーフローメニューにアイコンを表示する
- 19
ドロップダウンで選択したオプションに基づいてテキストフィールドを表示/非表示にする方法は？
- 20
ステータスバーを非表示にする方法+別のビューコントローラー（swift）で白色光のコンテンツを使用する方法は？
- 21
オーバーフローテキストを壊さずにdivクロスブラウザでスクロールバーを非表示にする
- 22
WebViewコンテンツがAndroidに表示されるまでプログレスバーを表示する方法
- 23
オーバーフローのあるdiv内にテキストを適切に収める方法：非表示？
- 24
コンテンツのロード中にフラッターWebViewでスピナーを表示する方法
- 25
スクロールアンドロイドスタジオでツールバーを非表示にする方法
- 26
divテキストがコンテナからオーバーフローするのを防ぐ方法
- 27
静的コンテキストと非静的コンテキストでSLF4Jロガーを作成するオーバーヘッドは何ですか？
- 28
Objectivecのコンテンツに応じてツールバーと一緒にテキストビューのサイズを変更する方法
- 29
反応ナビゲーションでツールバーを非表示にする方法
コメントを追加