省略号以限制离子的文本高度和宽度

fzwael

我试图限制文本的宽度和高度,我在CSS文件中使用了text-overflow:省略号,但得到了以下结果:

结果

我的CSS是:

.ellipsis{
    white-space: nowrap;
    width: 12em;
    height: 12em;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #000000; }
fzwael

谢谢大家,我找到了一个简单的解决方案:纯CSS阅读更多切换

HTML:

 <div>
  <input type="checkbox" class="read-more-state" id="post-1" />

  <p class="read-more-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <span class="read-more-target">Libero fuga facilis vel consectetur quos sapiente deleniti eveniet dolores tempore eos deserunt officia quis ab? Excepturi vero tempore minus beatae voluptatem!</span></p>

  <label for="post-1" class="read-more-trigger"></label>
</div>

CSS:

.read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
  content: 'Show more';
}

.read-more-state:checked ~ .read-more-trigger:before {
  content: 'Show less';
}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 0 .5em;
  color: #666;
  font-size: .9em;
  line-height: 2;
  border: 1px solid #ddd;
  border-radius: .25em;
}

/* Other style */ 
body {
  padding: 2%;
}

p {
  padding: 2%;
  background: #fff9c6;
  color: #c7b27e;
  border: 1px solid #fce29f;
  border-radius: .25em;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

TextView:在省略号后添加文本或更改省略号字符

来自分类Dev

文本溢出:高度有限的div内的弹性高度div内的省略号

来自分类Dev

是否有TextFormatFlags的组合允许文本换行和结尾的省略号?

来自分类Dev

如果发生溢出,如何设置UITextView的最大高度和固定宽度并强制省略号而不是滚动?

来自分类Dev

TextView文本在左侧被截断,而不是省略了省略号

来自分类Dev

Bootstrap面板标题:标题文本右侧带有省略号和按钮

来自分类Dev

CSS文字省略号和100%宽度

来自分类Dev

滚动时文本溢出省略号未在Chrome和IE中显示溢出内容

来自分类Dev

限制行内块元素的宽度以使其适合父级的省略号

来自分类Dev

CSS文字溢出省略号+以%表示的宽度无效

来自分类Dev

带省略号的浮动div的CSS-宽度未知

来自分类Dev

Reduce()和...(省略号)

来自分类Dev

文本溢出省略号和flex在Firefox上不起作用

来自分类Dev

截断省略号,不带宽度

来自分类Dev

如何用省略号截断长文本,但总是在省略号后显示图标

来自分类Dev

离子离子文本换行:删除省略号并转到标签的下一行

来自分类Dev

CSS div自动调整大小到内容,带有最大宽度和省略号文本

来自分类Dev

具有第二列动态宽度和省略号的固定宽度表

来自分类Dev

宽度100%元素中的文本溢出省略号实现

来自分类Dev

如何使用省略号文本溢出来适应卡的高度

来自分类Dev

文字溢出:省略号;不截断溢出文本并给出省略号

来自分类Dev

CSS文字溢出:省略号不取决于宽度

来自分类Dev

文本溢出:省略号和显示表格单元

来自分类Dev

带省略号的浮动div的CSS-宽度未知

来自分类Dev

以“ 100%”宽度div显示省略号

来自分类Dev

如何在Angular中使用省略号和标签实现(动态宽度)文本输入?

来自分类Dev

使用文本溢出获取跨度中文本的宽度:省略号;在 IE11

来自分类Dev

文本溢出:省略号不被尊重

来自分类Dev

我怎样才能让我的文本成为两行填充和省略号?

Related 相关文章

  1. 1

    TextView:在省略号后添加文本或更改省略号字符

  2. 2

    文本溢出:高度有限的div内的弹性高度div内的省略号

  3. 3

    是否有TextFormatFlags的组合允许文本换行和结尾的省略号?

  4. 4

    如果发生溢出,如何设置UITextView的最大高度和固定宽度并强制省略号而不是滚动?

  5. 5

    TextView文本在左侧被截断,而不是省略了省略号

  6. 6

    Bootstrap面板标题:标题文本右侧带有省略号和按钮

  7. 7

    CSS文字省略号和100%宽度

  8. 8

    滚动时文本溢出省略号未在Chrome和IE中显示溢出内容

  9. 9

    限制行内块元素的宽度以使其适合父级的省略号

  10. 10

    CSS文字溢出省略号+以%表示的宽度无效

  11. 11

    带省略号的浮动div的CSS-宽度未知

  12. 12

    Reduce()和...(省略号)

  13. 13

    文本溢出省略号和flex在Firefox上不起作用

  14. 14

    截断省略号,不带宽度

  15. 15

    如何用省略号截断长文本,但总是在省略号后显示图标

  16. 16

    离子离子文本换行:删除省略号并转到标签的下一行

  17. 17

    CSS div自动调整大小到内容,带有最大宽度和省略号文本

  18. 18

    具有第二列动态宽度和省略号的固定宽度表

  19. 19

    宽度100%元素中的文本溢出省略号实现

  20. 20

    如何使用省略号文本溢出来适应卡的高度

  21. 21

    文字溢出:省略号;不截断溢出文本并给出省略号

  22. 22

    CSS文字溢出:省略号不取决于宽度

  23. 23

    文本溢出:省略号和显示表格单元

  24. 24

    带省略号的浮动div的CSS-宽度未知

  25. 25

    以“ 100%”宽度div显示省略号

  26. 26

    如何在Angular中使用省略号和标签实现(动态宽度)文本输入?

  27. 27

    使用文本溢出获取跨度中文本的宽度:省略号;在 IE11

  28. 28

    文本溢出:省略号不被尊重

  29. 29

    我怎样才能让我的文本成为两行填充和省略号?

热门标签

归档