banner
innei

innei

写代码是因为爱,写到世界充满爱!
github
telegram
twitter

CSS テキストオーバーフロー Clip は、半文字を切り取らずにクリップします。

最近、同僚が私に尋ねました。「CSS でテキストのオーバーフローを切り捨てることはできますが、単一の文字を切り捨てないでください。」通常、私たちは text-overflow: clip; overflow: hidden を使用してこれを実現します。しかし、多くの場合、次のような状況が発生します。

後ろの文字が切り捨てられました

私は考えてみましたが、うまくいかないようです。もし私が幅を計算して、それから表示すべき完全な文字数を判断するために JavaScript を使ったらどうでしょうか。それができない場合は、UI と妥協するしかありません。

突然、ひらめきました。通常の状況では、テキストの改行はどのように行われるのでしょうか。通常の改行では、文字が半分切り捨てられることはありませんし、句読点に基づいて改行することもできます。

![] (https://cdn.jsdelivr.net/gh/Innei/fancy@master/2022/1015190705.png)

したがって、他の方法で最初の行のみを表示すれば良いだけです。したがって、外側のコンテナに最大の高さを追加し、高さは最初の行の高さであり、white-space: nowrap; text-overflow: clip; を削除すれば、完了です。

また、この方法では、どのようなテキストでも半分切り捨てられることはありません。テキストコンテナの高さについては、通常、UI デザインに記載されているので、それをコピーすれば簡単です。これが最も簡単な方法です。2 行でも問題ありません。何行でも問題ありません。

この方法は React Native にも適用できます。

上記の図は RN 0.69 の効果です。上部はこの方法を使用した効果で、下部は直接クリップを使用した効果です。

import { StatusBar } from 'expo-status-bar'
import { Dimensions, StyleSheet, Text, View } from 'react-native'

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.padding} />
      <View>
        <View style={styles.flexContainer}>
          <Text
            style={styles.text}
            numberOfLines={4}
            lineBreakMode="clip"
            ellipsizeMode="clip"
          >
            燕子去了,有再来的时候1111,,,,,,,,........;杨柳枯了,有再青的时候;桃花谢了,有再开的时候。但是,聪明的,你告诉我,我们的日子为什么一去不复返呢?——是有人偷了他们罢:那是谁?又藏在何处呢?是他们自己逃走了罢:现在又到了哪里呢?
          </Text>
        </View>
        <View style={styles.padding}></View>
        <View style={[styles.flexContainer, { height: 48 }]}>
          <Text
            ellipsizeMode="clip"
            numberOfLines={2}
            style={{ fontSize: 24, lineHeight: 24 }}
          >
            燕子去了,有再来的时候1111,,,,,,,,........;杨柳枯了,有再青的时候;桃花谢了,有再开的时候。但是,聪明的,你告诉我,我们的日子为什么一去不复返呢?——是有人偷了他们罢:那是谁?又藏在何处呢?是他们自己逃走了罢:现在又到了哪里呢?
          </Text>
        </View>
      </View>

      <StatusBar style="auto" />
    </View>
  )
}

const styles = StyleSheet.create({
  flexContainer: {
    // width: 350,
    // alignItems: 'flex-start',
    // justifyContent: 'flex-start',
    height: 46,
    overflow: 'hidden',
  },
  text: {
    fontSize: 24,
    lineHeight: 24,
    height: Dimensions.get('window').height,   // 注意这个(必须指定)
  },
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  padding: {
    height: 80,
    backgroundColor: '#12222233',
    marginVertical: 12,
  },
})

コードが添付されていますが、RN の Text は高さを指定する必要があるため、親要素の高さを聞くことができず、効果がない場合があります。デバイスの高さを直接指定することをお勧めします。

読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。