174

CSS ルールの組み合わせを使用して、オーバーフローする (親の境界から出る) ときにテキストを省略記号 (...) で終了できることを私は知っています。

同じ効果を達成することは可能ですが (気軽にノーと言ってください)、テキストを複数行に折り返すことはできますか?

ここにデモがあります。

div {
  width: 300px; 
  height: 42px; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
}

ご覧のとおり、テキストが div の幅より広くなると、テキストは省略記号で終わります。ただし、テキストを 2 行目に折り返して続行するための十分なスペースがまだあります。white-space: nowrapこれは、省略記号が機能するために必要なによって中断されます。

何か案は？

PS: JS ソリューションはありません。可能であれば純粋な CSS です。

4

17 に答える 17

273

簡単な CSS プロパティがそのトリックを実行できます。以下は、3 行の省略記号です。

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
于 2016-01-01T20:09:58.750 に答える
67

この純粋な CSS バージョンを見てみましょう: http://codepen.io/martinwolf/pen/qlFdp

display: -webkit-box;
max-width: 400px;
height: 109.2px;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.625;
于 2015-06-19T14:28:09.530 に答える
1

数行に制限すると、ほとんどすべてのブラウザーで機能しますが、Firefox と IE では省略記号 (3 つのドット) が表示されません。デモ - http://jsfiddle.net/ahzo4b91/1/

div {
width: 300px;
height: 2.8em;
line-height: 1.4em;
display: flex;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden; 
}
于 2019-01-16T15:46:39.353 に答える
0

これは、Mahan Lamei の提案に基づく Material-UI の色あせたテキスト効果です。

オーバーレイ スタイルを作成する 
const useStyles = makeStyles((theme) =>
  createStyles({
    fadeText: {
      background: `linear-gradient( 180deg, #FFFFFF00, 0%, #FFFFFF06 30%, #FFFFFFFF 100%)`,
      pointerEvents: "none",
    }
  })
)
次に、固定高のネストされた Box コンポーネントにグラデーションをオーバーレイします 
<Grid container justify="center">
  <Grid item xs={8} sm={6} md={4}>
    <Box>
      <Box
        component="div"
        overflow="hidden"
        display="flex"
        flexDirection="column"
        fontFamily="Roboto"
        fontSize="body1.fontSize"
        fontWeight="fontWeightLight"
        textAlign="justify"
        height={['8rem']}
      >
        <Box display="flex">
          Lorem ipsum dolor sit amet, consectetur adipiscing
          elit, sed do eiusmod tempor incididunt ut labore
          et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur
          sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est
          laborum.
        </Box>
      </Box>
      <Box
        className={classes.fadeText}
        display="block"
        position="relative"
        top="-4rem"
        height="4rem"
      />
    </Box>
  </Grid>
</Grid>

実際のデモ: Codesandbox

MUI のデフォルト テーマは省略された CSS カラー ( #FFF) を使用するため、現在のテーマに基づいてグラデーションを設定する場合は、6 つの完全な文字バリアントでそれらをオーバーライドする必要があります。

例:グラデーションを設定するために 使用themeします (例: 明るい/暗いテーマに基づく):

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    fadeText: {
      background: `linear-gradient( 180deg, ${theme.palette.background.paper}00 0%, ${theme.palette.background.paper}06 30%, ${theme.palette.background.paper}FF 100%)`
    } 
  })
)

編集：Tony Bogdanovの提案を含むように更新

于 2021-05-19T23:14:24.180 に答える
-1

これは完全なハックですが、機能します。

http://jsfiddle.net/2wPNG/

div {
    width: 30%;
    float: left;
    margin-right: 2%;
    height: 94px;
    overflow: hidden;
    position: relative;
}

div:after {
     display: block;
      content: '...';
      width: 1em;
  height: 1.5em;
  background: #fff;
  position: absolute;
  bottom: -6px;
  right: 0;
    }

それには問題があります....文字がぎこちなく途切れる可能性があり、レスポンシブサイトで奇妙な結果になる可能性があります.

于 2013-09-17T23:20:29.833 に答える
-3

ターゲットが何かわかりませんが、テキストを 2 行目に表示しますか?

ここにあなたの jsFiddle があります: http://jsfiddle.net/8kvWX/4/は以下を削除しました:

     white-space:nowrap;

これがあなたが探しているものかどうかはわかりません。

よろしく、

ミー

于 2013-04-09T18:41:19.103 に答える