两行文本溢出省略号

我知道您可以使用CSS规则的组合，使文本在溢出(超出父边界)时以省略号(…)结束。

是否有可能(请随意说，不)达到同样的效果，但让文本换行不止一行?

这是一个演示。

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

如您所见，当文本的宽度超过div的宽度时，文本以省略号结束。但是，仍然有足够的空间让文本换行成第二行并继续。这被空白符:nowrap打断，这是省略号工作所必需的。

什么好主意吗?

附注:没有JS解决方案，如果可能的话，纯CSS。

当前回答

看看这个纯css版本:http://codepen.io/martinwolf/pen/qlFdp

h2 { 显示:-webkit-box; max-width: 400 px; -webkit-line-clamp: 2; -webkit-box-orient:垂直; 溢出:隐藏; 文本溢出:省略; ｝ <h2> .</h2> .</h2> .</h2> .</h2> .</h2> .</h2> .

2015-06-19 14:28:09

其他回答

不知道你的目标是什么，但是你想让文本出现在第二行吗?

这是你的jsFiddle: http://jsfiddle.net/8kvWX/4/刚刚删除以下:

     white-space:nowrap;

我不确定这是否是你想要的。

问候,

Mee

2013-04-09 18:41:19

下面是一个基于Mahan Lamei建议的材质ui褪色文本效果:

Create the overlay style

const useStyles = makeStyles((theme) =>
  createStyles({
    fadeText: {
      background: `linear-gradient( 180deg, #FFFFFF00, 0%, #FFFFFF06 30%, #FFFFFFFF 100%)`,
      pointerEvents: "none",
    }
  })
)

Next overlay a gradient on a fixed-height nested Box component

<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)，所以如果你想根据当前主题设置渐变，你需要用完整的六个字符变体来覆盖它们。

示例:使用主题设置渐变(例如基于亮/暗主题):

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%)`
    } 
  })
)

编辑:更新包括托尼波格丹诺夫的建议

2021-05-19 23:14:24

下面是一个使用jQuery管理省略号的简单脚本。它检查元素的实际高度，并创建一个隐藏的原始节点和一个截断的节点。当用户单击时，它会在两个版本之间切换。

这样做的最大好处之一是，“省略号”像预期的那样位于最后一个单词附近。

如果你使用纯CSS解决方案，这三个点看起来离最后一个单词很远。

2017-06-07 08:04:55

你可以使用一个溶解的效果代替省略号，纯CSS，看起来更专业:

    <div style="width: 293px; height:48px; overflow: hidden; ">
        More than two line of text goes here-More than two line of text goes here
    </div>
    <div style="position: relative; top: -24px; width: 293px; height:24px; 
             background: linear-gradient(90deg, rgba(255,0,0,0) 40%, rgba(255,255,255,1) 99%);">
    </div>

这里我假设你的背景颜色是白色。

2020-07-07 14:01:47

这是适合我的解决方案，因为我知道每个人想要的结果可能不同。

display: -webkit-box;
min-height: 109.2px;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.625; /* as per desire */

2022-03-19 21:32:26

两行文本溢出省略号

推荐文章

最新文章

标签