省略号以限制离子的文本高度和宽度
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] 删除。
编辑于
相关文章
Related 相关文章
- 1
CSS div自动调整大小到内容，带有最大宽度和省略号文本
- 2
如何在Angular中使用省略号和标签实现（动态宽度）文本输入？
- 3
CSS文字省略号和100％宽度
- 4
如果发生溢出，如何设置UITextView的最大高度和固定宽度并强制省略号而不是滚动？
- 5
离子离子文本换行：删除省略号并转到标签的下一行
- 6
文本溢出：省略号和显示表格单元
- 7
Reduce（）和...（省略号）
- 8
截断省略号，不带宽度
- 9
以“ 100％”宽度div显示省略号
- 10
文本溢出：高度有限的div内的弹性高度div内的省略号
- 11
限制行内块元素的宽度以使其适合父级的省略号
- 12
使用文本溢出获取跨度中文本的宽度：省略号；在 IE11
- 13
具有第二列动态宽度和省略号的固定宽度表
- 14
宽度100％元素中的文本溢出省略号实现
- 15
如何使用省略号文本溢出来适应卡的高度
- 16
文本溢出：省略号不被尊重
- 17
TextView文本在左侧被截断，而不是省略了省略号
- 18
TextView：在省略号后添加文本或更改省略号字符
- 19
如何用省略号截断长文本，但总是在省略号后显示图标
- 20
文字溢出：省略号；不截断溢出文本并给出省略号
- 21
带省略号的浮动div的CSS-宽度未知
- 22
CSS文字溢出省略号+以％表示的宽度无效
- 23
CSS文字溢出：省略号不取决于宽度
- 24
带省略号的浮动div的CSS-宽度未知
- 25
是否有TextFormatFlags的组合允许文本换行和结尾的省略号？
- 26
Bootstrap面板标题：标题文本右侧带有省略号和按钮
- 27
滚动时文本溢出省略号未在Chrome和IE中显示溢出内容
- 28
文本溢出省略号和flex在Firefox上不起作用
- 29
我怎样才能让我的文本成为两行填充和省略号？
我来说两句