元素超出宽度，给元素隐藏并且显示...

最新推荐文章于 2022-12-02 15:50:36 发布

述。一牛

最新推荐文章于 2022-12-02 15:50:36 发布

阅读量598

点赞数

文章标签： css javascript css3

本文链接：https://blog.csdn.net/weixin_47981445/article/details/125225854

版权

1.元素超出宽度，给元素隐藏并且显示…

.flex-ac .pbr{
    width: 150rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1152B5;
    line-height: 24rpx;
    text-decoration:underline;
    display:block;/*内联对象需加*/
    word-break:keep-all;/* 不换行 */
    white-space:nowrap;/* 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;/* IE 专有属性，当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

在这里插入图片描述

2.给元素宽度100% 的情况，超过指定行数用…展示

// An highlighted block
.leftbox2 {
    font-size: 30rpx;
    line-height: 48rpx;
    max-width: 100%;
    font-weight: bold;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* -webkit-line-clamp: 2;  这里是显示多少行*/
    -webkit-line-clamp: 1; 
    font-weight: bold;
}