文字超出隐藏省略号表示...

image.png

超出省略号表示的两个要点：
1、必须未块级元素
2、要有宽度

html

<p>选择赠送课程</span></p>
<div class="course-activity-title">
     <span class="text-ellipsis">哈哈哈哈哈哈哈哈哈哈哈</span>
     <span class="activity-del">删除</span>
</div>

css

.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
.course-activity-title {
        width: 100%; //父级要有高度
        height: 0.88rem;
        display: flex; //两个自己都要是块元素
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding-left: 0.32rem;
        font-size: 0.28rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(69, 78, 112, 1);
        border-bottom: 1px solid rgba(69, 78, 112, 0.08);
        .activity-del {
          padding: 0.12rem 0.32rem;
        }

如果是同一行里有两个元素的宽度都是不确定的，要怎么做超出省略号表示呢？

image.png

如上图中 pane-user的用户名 和 pane-status 宽度都是不确定的，其中pane-status优先显示全部。
HTML：

<div class="pane-title">
        <div class="pane-user text-ellipsis">
          <img class="avater" alt="用户头像">
          <span class="name text-ellipsis">用户名称</span>
        </div>
        <span class="pane-status">状态</span>
      </div

CSS：

.text-ellipsis {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .pane-title {
      display: flex;
      justify-content: space-between;
      padding: 0.24rem 0.32rem;
      .pane-user {
        width: 100%; // width + text-ellipsis => 超出时缩略
        text-align: left;
        .avater {
          display: inline-block;
          width: 0.48rem;
          height: 0.48rem;
          border-radius: 0.48rem;
          background-color: #eee;
          background-size: 100% 100%;
          background-position: center;
          vertical-align: middle;
        }
        .name {
          display: inline-block;
          width: calc(100% - 0.48rem - 0.16rem - 0.2rem);  // width + text-ellipsis => 超出时缩略
          text-align: left;
          color: rgba(69, 78, 112, 1);
          font-size: 0.24rem;
          vertical-align: middle;
          word-break: break-all;
          margin-left: 0.16rem;
        }
      }
      .pane-status {
        padding: 0 0.25rem;
        flex-shrink: 0; // 状态优先显示，不缩略，所以这里不设置宽度自行展示
        // width: 1.08rem; 
        height: 0.48rem;
        line-height: 0.48rem;
        border-radius: 0.48rem;
      }
    }