React NativeのellipsizeModeとは？テキスト表示の悩みを解決！

2025-06-06

これは、Android の android:ellipsize や iOS の lineBreakMode に相当する機能です。

設定できる値は以下の4つです。

head (または start):
- テキストの先頭が省略されます。
- 例: ...ext
middle (または center):
- テキストの中央が省略されます。
- 例: te...xt
tail (または end):
- テキストの末尾が省略されます。
- 例: tex...
- これがデフォルトの値です。
clip:
- テキストは省略されずに切り取られます。
- 例: text (表示領域の分だけ)

使用例

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text} numberOfLines={1} ellipsizeMode="head">
        これは非常に長いテキストで、先頭が省略されるでしょう。
      </Text>
      <Text style={styles.text} numberOfLines={1} ellipsizeMode="middle">
        これは非常に長いテキストで、中央が省略されるでしょう。
      </Text>
      <Text style={styles.text} numberOfLines={1} ellipsizeMode="tail">
        これは非常に長いテキストで、末尾が省略されるでしょう。
      </Text>
      <Text style={styles.text} numberOfLines={1} ellipsizeMode="clip">
        これは非常に長いテキストで、切り取られるでしょう。
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 20,
  },
  text: {
    width: 200, // 幅を制限して省略されるようにする
    marginBottom: 10,
    borderWidth: 1,
    borderColor: 'gray',
    padding: 5,
  },
});

export default App;

AndroidとiOSで表示のニュアンスが若干異なる場合があります。
ellipsizeMode は、テキストが単一行に収まらない場合にのみ効果を発揮します。
ellipsizeMode が機能するためには、通常、numberOfLines プロパティを設定して、テキストが何行にわたって表示されるかを制限する必要があります。numberOfLines が設定されていない場合、テキストは自動的に折り返されるため、省略表示は発生しません。

numberOfLines の設定忘れ

よくあるエラー
ellipsizeMode を設定したのに、テキストが省略されない。

原因
ellipsizeMode は、テキストが指定された行数に収まらない場合にのみ機能します。numberOfLines プロパティが設定されていない場合、テキストは自動的に折り返されるため、省略表示は発生しません。

トラブルシューティング

Text コンポーネントに numberOfLines プロパティを設定し、テキストを何行に制限するかを指定します。通常、1行に制限したい場合は numberOfLines={1} とします。

// 悪い例: 省略されない
<Text ellipsizeMode="tail">
  これは非常に長いテキストで、末尾が省略されるでしょう。
</Text>

// 良い例: 省略される
<Text numberOfLines={1} ellipsizeMode="tail">
  これは非常に長いテキストで、末尾が省略されるでしょう。
</Text>

コンテナの幅が不足している

よくあるエラー
numberOfLines も ellipsizeMode も設定しているのに、期待通りに省略されない、またはテキストが途中で切れてしまう。

原因
Text コンポーネントを囲む親コンポーネント（View など）の幅が、テキストを表示するのに十分でない場合があります。これにより、テキストがコンテナの境界を超えても省略記号が表示されないことがあります。

トラブルシューティング

flex: 1 を設定することで、親の利用可能なスペースを最大限に利用できます。
親コンポーネントまたは Text コンポーネント自体に、適切な width または flex プロパティを設定して、テキストが表示される領域を明確にします。

// 例: 親の幅が不明確な場合
<View>
  <Text numberOfLines={1} ellipsizeMode="tail">
    非常に長いテキスト
  </Text>
</View>

// 良い例: 幅を明示的に指定
<View style={{ width: 200 }}>
  <Text numberOfLines={1} ellipsizeMode="tail">
    非常に長いテキスト
  </Text>
</View>

// または flex を使用
<View style={{ flexDirection: 'row' }}>
  <Text style={{ flex: 1 }} numberOfLines={1} ellipsizeMode="tail">
    非常に長いテキスト
  </Text>
  <Text>付随テキスト</Text>
</View>

ネストされた Text コンポーネント

よくあるエラー
Text コンポーネントの中に別の Text コンポーネントをネストした場合に、ellipsizeMode が機能しない。

原因
React Native の Text コンポーネントの内部は、Flexbox レイアウトではなくテキストレイアウトを使用します。Text の中に Text をネストすると、予期せぬレイアウトの挙動を引き起こすことがあります。

トラブルシューティング

どうしてもネストが必要な場合は、各 Text コンポーネントに個別の numberOfLines や ellipsizeMode を適用し、それぞれのレイアウトが独立して機能するように考慮します。しかし、これは複雑になりがちで、期待通りの結果が得られないこともあります。
可能な限り、ellipsizeMode を適用したいテキストは、単一の Text コンポーネント内に収めるようにします。

// 悪い例: ネストされたTextでellipsizeModeが効かない可能性
<Text numberOfLines={1} ellipsizeMode="tail">
  これは <Text style={{ fontWeight: 'bold' }}>強調された</Text> テキストです。
</Text>

// 良い例 (場合による): 複数のTextを並べるか、スタイルを適用
<View style={{ flexDirection: 'row' }}>
  <Text numberOfLines={1} ellipsizeMode="tail">
    これは
  </Text>
  <Text style={{ fontWeight: 'bold' }}>強調された</Text>
  <Text numberOfLines={1} ellipsizeMode="tail">
    テキストです。
  </Text>
</View>
// または
<Text numberOfLines={1} ellipsizeMode="tail">
  これは <Text style={{ fontWeight: 'bold' }}>強調された</Text> テキストです。
  {/* この場合、親のnumberOfLinesとellipsizeModeが適用されるが、ネストされたTextの挙動が複雑になることがある */}
</Text>

ellipsizeMode="clip" の挙動（特にAndroid）

よくあるエラー
ellipsizeMode="clip" を設定したが、テキストが単に途中で切れるだけで、省略記号が表示されない。

原因
clip モードは、その名の通りテキストを「切り取る」だけなので、省略記号（...）は表示されません。また、かつてはAndroidで ellipsizeMode="clip" がクラッシュを引き起こすバグがありましたが、これは修正されています。ただし、古いバージョンのReact Nativeを使用している場合や、特定のAndroidデバイスで問題が発生する可能性はゼロではありません。

トラブルシューティング

もし古いReact Nativeバージョンでclipがクラッシュするなどの問題が発生する場合は、バージョンアップを検討するか、他のellipsizeModeを使用することを検討してください。
clip モードは、省略記号を表示したくない場合に意図的に使用します。省略記号を表示したい場合は、head、middle、tail のいずれかを使用します。

よくあるエラー
flexDirection: 'row' の親要素内で Text を使用すると、ellipsizeMode が期待通りに機能しない。

原因
flexDirection: 'row' の場合、子要素はデフォルトでコンテンツの幅に合わせようとします。Text コンポーネントに明示的な幅や flex プロパティが設定されていないと、無限に広がるか、親の境界を超えて表示され、省略表示のトリガーが機能しないことがあります。

Text コンポーネントに flex: 1 を設定して、利用可能なスペースを埋めるようにします。これにより、テキストがコンテナの幅に収まるようになり、必要に応じて省略表示がトリガーされます。

// 悪い例: 横並びでellipsizeModeが効かない可能性
<View style={{ flexDirection: 'row' }}>
  <Text>ラベル:</Text>
  <Text numberOfLines={1} ellipsizeMode="tail">
    これは非常に長い値です。
  </Text>
</View>

// 良い例: Textにflex: 1を設定
<View style={{ flexDirection: 'row' }}>
  <Text>ラベル:</Text>
  <Text style={{ flex: 1 }} numberOfLines={1} ellipsizeMode="tail">
    これは非常に長い値です。
  </Text>
</View>

基本的な使用例

この例では、異なる ellipsizeMode の値が、テキストの表示にどのように影響するかを示します。numberOfLines={1} を設定することで、テキストが1行に制限され、省略表示がトリガーされるようにしています。

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const BasicEllipsizeModeExample = () => {
  const longText = "これは非常に長いテキストで、指定された領域に収まりきらない場合に、どのように省略されるかを示すためのものです。";

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Text#ellipsizeMode の基本例</Text>

      {/* ellipsizeMode="head" (または "start") */}
      <View style={styles.textRow}>
        <Text style={styles.label}>Head (start):</Text>
        <Text style={styles.ellipsizedText} numberOfLines={1} ellipsizeMode="head">
          {longText}
        </Text>
      </View>

      {/* ellipsizeMode="middle" (または "center") */}
      <View style={styles.textRow}>
        <Text style={styles.label}>Middle (center):</Text>
        <Text style={styles.ellipsizedText} numberOfLines={1} ellipsizeMode="middle">
          {longText}
        </Text>
      </View>

      {/* ellipsizeMode="tail" (または "end") - デフォルト */}
      <View style={styles.textRow}>
        <Text style={styles.label}>Tail (end - default):</Text>
        <Text style={styles.ellipsizedText} numberOfLines={1} ellipsizeMode="tail">
          {longText}
        </Text>
      </View>

      {/* ellipsizeMode="clip" */}
      <View style={styles.textRow}>
        <Text style={styles.label}>Clip:</Text>
        <Text style={styles.ellipsizedText} numberOfLines={1} ellipsizeMode="clip">
          {longText}
        </Text>
      </View>

      {/* numberOfLinesがない場合 - 省略されない */}
      <View style={styles.textRow}>
        <Text style={styles.label}>No numberOfLines:</Text>
        <Text style={styles.ellipsizedText} ellipsizeMode="tail">
          {longText}
        </Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'flex-start', // ラベルを左に寄せる
    padding: 20,
    backgroundColor: '#F5FCFF',
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 20,
    alignSelf: 'center', // 中央に配置
  },
  textRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
    width: '100%', // 親Viewの幅を最大化
  },
  label: {
    fontWeight: 'bold',
    marginRight: 10,
    width: 120, // ラベルの幅を固定してテキストの配置を調整
  },
  ellipsizedText: {
    flex: 1, // 残りのスペースをTextコンポーネントが占める
    fontSize: 14,
    borderWidth: 1,
    borderColor: '#CCC',
    padding: 5,
    backgroundColor: '#FFF',
  },
});

export default BasicEllipsizeModeExample;

解説

「No numberOfLines」の例では、ellipsizeMode が設定されていても numberOfLines がないためにテキストが折り返され、省略表示が発生しないことを示しています。
ellipsizedText スタイルに flex: 1 を設定することで、Text コンポーネントが親の View の利用可能なスペースを最大限に利用し、テキストが省略される条件を明確にしています。
numberOfLines={1} を設定することで、すべてのテキストが1行に強制され、表示領域を超える部分が省略されます。
各 Text コンポーネネントに異なる ellipsizeMode を適用し、その挙動を比較しています。
longText という長い文字列を定義しています。

この例では、flexDirection: 'row' を持つ親コンポーネント内で ellipsizeMode を使用する際の一般的なシナリオを示します。特に、Text コンポーネントに flex: 1 を適用することの重要性がわかります。

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const RowEllipsizeModeExample = () => {
  const itemDescription = "これは商品アイテムの詳細説明です。非常に長いテキストになる可能性があり、限られたスペースで適切に表示する必要があります。";

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Flex Direction Row との組み合わせ</Text>

      {/* 良い例: flex: 1 を使用 */}
      <View style={styles.itemRow}>
        <Text style={styles.itemLabel}>商品名:</Text>
        <Text style={styles.itemValueGood} numberOfLines={1} ellipsizeMode="tail">
          {itemDescription}
        </Text>
      </View>

      {/* 悪い例: flex: 1 がないためテキストが親をはみ出す可能性がある */}
      <View style={styles.itemRow}>
        <Text style={styles.itemLabel}>商品名 (Bad):</Text>
        <Text style={styles.itemValueBad} numberOfLines={1} ellipsizeMode="tail">
          {itemDescription}
        </Text>
      </View>

      {/* 複数の省略テキストがある場合 */}
      <View style={styles.itemRow}>
        <Text style={styles.itemValueGood} numberOfLines={1} ellipsizeMode="head">
          {itemDescription}
        </Text>
        <Text style={styles.separator}> - </Text>
        <Text style={styles.itemValueGood} numberOfLines={1} ellipsizeMode="tail">
          {itemDescription}
        </Text>
      </View>

    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
    backgroundColor: '#F5FCFF',
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 20,
    alignSelf: 'center',
  },
  itemRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 15,
    borderWidth: 1,
    borderColor: '#DDD',
    padding: 10,
    backgroundColor: '#FFF',
  },
  itemLabel: {
    fontWeight: 'bold',
    marginRight: 10,
    minWidth: 80, // ラベルの最小幅
  },
  itemValueGood: {
    flex: 1, // ★これが重要！残りのスペースを埋める
    fontSize: 14,
    color: '#333',
    borderWidth: 1,
    borderColor: 'green', // わかりやすいように枠線
    padding: 3,
  },
  itemValueBad: {
    // flex: 1 がないため、テキストが親をはみ出す可能性が高い
    fontSize: 14,
    color: '#333',
    borderWidth: 1,
    borderColor: 'red', // 悪い例として赤枠
    padding: 3,
  },
  separator: {
    marginHorizontal: 5,
    color: '#666',
  }
});

export default RowEllipsizeModeExample;

解説

itemValueBad では flex: 1 がないため、テキストが長すぎると、親の View の境界をはみ出して表示される可能性があります。これは、ellipsizeMode が期待通りに機能しない一般的な理由です。
itemValueGood では、flex: 1 を設定することで、Text コンポーネントが親の View 内で利用可能な残りのスペースを占めます。これにより、テキストがその領域に収まらない場合に ellipsizeMode が正しく機能します。
itemRow は flexDirection: 'row' を持っており、子要素が横並びになります。

ユーザーからの入力やAPIから取得したデータなど、テキストの内容が動的に変わる場合に ellipsizeMode を適用する例です。

import React, { useState } from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';

const DynamicEllipsizeModeExample = () => {
  const [inputText, setInputText] = useState("React NativeのTextコンポーネントにおけるellipsizeModeは、非常に長いテキストを効果的に管理するために不可欠なプロパティです。");

  return (
    <View style={styles.container}>
      <Text style={styles.title}>動的なテキストとellipsizeMode</Text>

      <TextInput
        style={styles.textInput}
        onChangeText={setInputText}
        value={inputText}
        placeholder="ここに長いテキストを入力してください..."
        multiline
      />

      <View style={styles.displayRow}>
        <Text style={styles.label}>動的テキスト (Tail):</Text>
        <Text style={styles.dynamicText} numberOfLines={1} ellipsizeMode="tail">
          {inputText}
        </Text>
      </View>

      <View style={styles.displayRow}>
        <Text style={styles.label}>動的テキスト (Middle):</Text>
        <Text style={styles.dynamicText} numberOfLines={1} ellipsizeMode="middle">
          {inputText}
        </Text>
      </View>

      <View style={styles.displayRow}>
        <Text style={styles.label}>複数行 (ellipsizeなし):</Text>
        <Text style={styles.dynamicText} numberOfLines={3}>
          {inputText}
        </Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    padding: 20,
    backgroundColor: '#F5FCFF',
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 20,
    alignSelf: 'center',
  },
  textInput: {
    height: 80,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 20,
    padding: 10,
    textAlignVertical: 'top', // Androidでテキストが上から始まるように
  },
  displayRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
    width: '100%',
  },
  label: {
    fontWeight: 'bold',
    marginRight: 10,
    width: 100,
  },
  dynamicText: {
    flex: 1,
    fontSize: 14,
    borderWidth: 1,
    borderColor: '#AAA',
    padding: 5,
    backgroundColor: '#FFF',
  },
});

export default DynamicEllipsizeModeExample;

「複数行」の例では、numberOfLines={3} を設定し、ellipsizeMode を指定しないことで、テキストが複数行にわたって折り返される挙動を示しています。
numberOfLines={1} と ellipsizeMode を組み合わせることで、ユーザーがどんなに長いテキストを入力しても、それが適切に省略表示されることを確認できます。
入力されたテキストが inputText ステートに保存され、それが下にある Text コンポーネントに表示されます。
TextInput を使用して、ユーザーがテキストを自由に入力できるようにしています。

手動での文字列操作と省略記号の追加

最も基本的な代替手段は、JavaScriptで直接文字列を操作して、指定した長さで切り取り、省略記号を追加する方法です。この方法は、Textコンポーネントの機能に依存せず、より細かい制御が可能です。

Pros

特定の文字数で厳密にテキストを切りたい場合に有効。
ellipsizeModeでは不可能な、任意の場所での省略記号挿入や、省略記号以外のカスタム表示（例: 「...さらに表示」）が可能。
完全にカスタマイズ可能。

Cons

レイアウトの変更（画面の向き、フォントサイズの変更など）に対応するのが難しい。
複数行のテキストでは、表示領域に収まる行数を正確に計算するのが難しい。
テキストの実際の表示幅ではなく、文字数に基づいて切り取られるため、固定幅のフォントでない限り、必ずしもUIに正確に収まるとは限らない。

コード例

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const truncateText = (text, maxLength, ellipse = '...') => {
  if (text.length <= maxLength) {
    return text;
  }
  return text.substring(0, maxLength - ellipse.length) + ellipse;
};

const ManualTruncationExample = () => {
  const longText = "これは非常に長いテキストで、手動で切り取られて省略記号が追加される例です。";
  const shortText = "短いテキスト";

  return (
    <View style={styles.container}>
      <Text style={styles.title}>手動でのテキスト切り取り</Text>

      <View style={styles.textRow}>
        <Text style={styles.label}>Max 20 chars:</Text>
        <Text style={styles.truncatedText}>
          {truncateText(longText, 20)}
        </Text>
      </View>

      <View style={styles.textRow}>
        <Text style={styles.label}>短いテキスト:</Text>
        <Text style={styles.truncatedText}>
          {truncateText(shortText, 20)}
        </Text>
      </View>

      <View style={styles.textRow}>
        <Text style={styles.label}>カスタム省略記号:</Text>
        <Text style={styles.truncatedText}>
          {truncateText(longText, 25, ' [More]')}
        </Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'flex-start',
    padding: 20,
    backgroundColor: '#F5FCFF',
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 20,
    alignSelf: 'center',
  },
  textRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
    width: '100%',
  },
  label: {
    fontWeight: 'bold',
    marginRight: 10,
    width: 120,
  },
  truncatedText: {
    flex: 1,
    fontSize: 14,
    borderWidth: 1,
    borderColor: '#CCC',
    padding: 5,
    backgroundColor: '#FFF',
  },
});

export default ManualTruncationExample;

これはellipsizeModeの直接的な代替というよりは、長いテキストを扱う際のユーザーエクスペリエンスを向上させるための方法です。テキストの最初の数行だけを表示し、「さらに表示」ボタンをタップすると全文が表示されるようにします。

Pros

UIが初期状態ではすっきりする。
ユーザーは必要に応じて全文を読める。

Cons

テキストが長すぎる場合、全文表示時にUIが大きく変わる可能性がある。
実装がより複雑になる（テキストの長さ計測、状態管理、アニメーションなど）。