quiz icon indicating copy to clipboard operation
quiz copied to clipboard

Published 20 hours ago • verified publisher icon zhangxinxu

CSS基础测试9

Open zhangxinxu opened this issue 5 years ago • 45 comments

本期小测题目如下：

请附上对应的CSS代码，注意缩进和代码高亮，可以使用下面语法：

```css
你的代码在这里
```

请提供在线的可访问的demo地址（精力有限，没有demo减1分），如jsbin.com、jsfiddle.net或codepen.io，使用国内的类似工具也可以。

本周小测直播答疑为本周六7月20日上午10:00，大约30分钟，直播地址：https://live.bilibili.com/21193211

首位答题者有机会被翻牌，每位答题者都可获得2积分底分。

感谢您的参与！

zhangxinxu avatar Jul 17 '19 09:07 zhangxinxu

方式一：float布局 demo兼容IE8

.page-list{
    padding: 0;
    list-style: none;
}
.page-title{
    overflow:hidden;
    height:40px;
    line-height: 40px;
}
.page-txt{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    color: #a2a5ac;
    text-align:left;
}
.page-lable{
    float: right;
}
.page-sign{
    font-size: 14px;
    padding: 2px 3px;
    margin-left: 3px;
    border: 1px solid;
    border-radius: 2px;
}
.page-sign[type="type"]{
    color:#aeafaf;
}
.page-sign[type="status"]{
    color:#ee4e54;
}
.page-sign[type="number"]{
    color:#669ef7;
}
.page-list[reserve] .page-txt{
    direction: rtl;
}

<ul class="page-list">
    <li class="page-title">
        <div class="page-lable">
            <span class="page-sign" type="type">都市</span>
            <span class="page-sign" type="status">连载中</span>
            <span class="page-sign" type="number">54.82万字</span>
        </div>
        <div class="page-txt">这次是一个新的故事这次是一个新的故事这次是一个新的故事这次是一个新的故事这次是一个新的故事</div>
    </li>
    <li class="page-title">
        <div class="page-lable">
            <span class="page-sign" type="type">都市</span>
            <span class="page-sign" type="status">完本</span>
            <span class="page-sign" type="number">1万字</span>
        </div>
        <div class="page-txt">这次是一个新的故事</div>
    </li>
    <li class="page-title">
        <div class="page-lable">
            <span class="page-sign" type="type">都市</span>
            <span class="page-sign" type="status">完本</span>
            <span class="page-sign" type="number">1059.98万字</span>
        </div>
        <div class="page-txt">这次是一个新的故事</div>
    </li>
</ul>
<ul class="page-list" reserve>
    <li class="page-title">
        <div class="page-lable">
            <span class="page-sign" type="type">都市</span>
            <span class="page-sign" type="status">连载中</span>
            <span class="page-sign" type="number">54.82万字</span>
        </div>
        <div class="page-txt">这次是一个新的故事这次是一个新的故事这次是一个新的故事这次是一个新的故事这次是一个新的故事</div>
    </li>
    <li class="page-title">
        <div class="page-lable">
            <span class="page-sign" type="type">都市</span>
            <span class="page-sign" type="status">完本</span>
            <span class="page-sign" type="number">1万字</span>
        </div>
        <div class="page-txt">这次是一个新的故事</div>
    </li>
    <li class="page-title">
        <div class="page-lable">
            <span class="page-sign" type="type">都市</span>
            <span class="page-sign" type="status">完本</span>
            <span class="page-sign" type="number">1059.98万字</span>
        </div>
        <div class="page-txt">这次是一个新的故事</div>
    </li>
</ul>

方式二：table-cell布局 demo兼容IE8

.page-list{
    padding: 0;
    list-style: none;
}
.page-title{
    display: table;
    width: 100%;
    line-height: 40px;
}
.page-txt{
    display: table-cell;
    position: relative;
    text-align: left;
}
.page-txt:before{
    content: 'x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x';
    /*足够长的占位*/
    height: 0;
    display: block;
    visibility: hidden;
}
.page-txt a{
    position: absolute;
    left: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    color: #a2a5ac;
}
.page-lable{
    display: table-cell;
    white-space: nowrap;
}
.page-sign{
    font-size: 14px;
    padding: 2px 3px;
    margin-left: 3px;
    border: 1px solid;
    border-radius: 2px;
}
.page-sign[type="type"]{
    color:#aeafaf;
}
.page-sign[type="status"]{
    color:#ee4e54;
}
.page-sign[type="number"]{
    color:#669ef7;
}
.page-list[reserve] .page-txt{
    direction: rtl;
}

<ul class="page-list">
    <li class="page-title">
        <div class="page-txt"><a>这次是一个新的故事这次是一个新的故事这次是一个新的故事这次是一个新的故事这次是一个新的故事这次是一个新的故事这次是一个新的故事这次是一个新的故事这次是一个新的故事这次是一个新的故事</a></div>
        <div class="page-lable">
            <span class="page-sign" type="type">都市</span>
            <span class="page-sign" type="status">连载中</span>
            <span class="page-sign" type="number">54.82万字</span>
        </div>
    </li>
    <li class="page-title">
        <div class="page-txt"><a>这次是一个新的故事</a></div>
        <div class="page-lable">
            <span class="page-sign" type="type">都市</span>
            <span class="page-sign" type="status">完本</span>
            <span class="page-sign" type="number">1万字</span>
        </div>
    </li>
    <li class="page-title">
        <div class="page-txt"><a>这次是一个新的故事</a></div>
        <div class="page-lable">
            <span class="page-sign" type="type">都市</span>
            <span class="page-sign" type="status">完本</span>
            <span class="page-sign" type="number">1059.98万字</span>
        </div>
    </li>
</ul>
<ul class="page-list" reserve>
    <li class="page-title">
        <div class="page-txt"><a>这次是一个新的故事这次是一个新的故事这次是一个新的故事这次是一个新的故事这次是一个新的故事这次是一个新的故事这次是一个新的故事这次是一个新的故事这次是一个新的故事这次是一个新的故事</a></div>
        <div class="page-lable">
            <span class="page-sign" type="type">都市</span>
            <span class="page-sign" type="status">连载中</span>
            <span class="page-sign" type="number">54.82万字</span>
        </div>
    </li>
    <li class="page-title">
        <div class="page-txt"><a>这次是一个新的故事</a></div>
        <div class="page-lable">
            <span class="page-sign" type="type">都市</span>
            <span class="page-sign" type="status">完本</span>
            <span class="page-sign" type="number">1万字</span>
        </div>
    </li>
    <li class="page-title">
        <div class="page-txt"><a>这次是一个新的故事</a></div>
        <div class="page-lable">
            <span class="page-sign" type="type">都市</span>
            <span class="page-sign" type="status">完本</span>
            <span class="page-sign" type="number">1059.98万字</span>
        </div>
    </li>
</ul>

XboxYan avatar Jul 17 '19 10:07 XboxYan

题目一

兼容 IE8 暂时没想到如何实现，针对此需求感觉使用 flex 就可以很好地实现。

<ul class="list-1">
    <li class="item">
        <span class="title">这是一个长度不确定的标题标题这是一个长度不确定的标题标题这是一个长度不确定的标题标题这是一个长度不确定的标题标题这是一个长度不确定的标题标题这是一个长度不确定的标题标题</span>
        <div class="tag-list">
            <span class="tag">标签1</span>
            <span class="tag">标签2</span>
            <span class="tag">标签3</span>
        </div>
    </li>
</ul>

.list-1 {
    .item {
        line-height: 30px;
        display: flex;
    }
    .title {
        flex-grow: 1;
        line-height: 30px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .tag-list {
        flex-grow: 0;
        flex-shrink: 0;
    }
}

题目二

在一的基础上，使用 direction: rtl; 改变方向即可。

<ul class="list-2">
    <li class="item">
        <span class="title">这是一个长度不确定的标题标题这是一个长度不确定的标题标题这是一个长度不确定的标题标题这是一个长度不确定的标题标题这是一个长度不确定的标题标题这是一个长度不确定的标题标题</span>
        <div class="tag-list">
            <span class="tag">标签1</span>
            <span class="tag">标签2</span>
            <span class="tag">标签3</span>
        </div>
    </li>
</ul>

.list-2 {
    .item {
        line-height: 30px;
        display: flex;
        height: 30px;
    }
    .title {
        flex-grow: 1;
        line-height: 30px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        direction: rtl;
    }
    .tag-list {
        flex-grow: 0;
        flex-shrink: 0;
    }
}

magicds avatar Jul 17 '19 11:07 magicds

demo地址：https://codepen.io/zhangxiaodong/pen/gNqRMG

第一题：

<div class="box">
    <p class="title">天王盖地虎，宝塔镇河妖！么哈么哈？谁在说话</p>
    <span class="label" data-label="1">都市</span>
    <span class="label" data-label="2">连载中</span>
    <span class="label" data-label="3">54.82万字</span>
</div>

    html, body {
        padding: 0;
        margin: 0;
    }
    @media screen and (min-width: 375px) {
        html {
            font-size: calc(100% + 2 * (100vw - 375px) / 39);
            font-size: calc(16px + 2 * (100vw - 375px) / 39);
        }
    }
    @media screen and (min-width: 414px) {
        html {
            font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
            font-size: calc(18px + 4 * (100vw - 414px) / 586);
        }
    }
    .box {
        display: flex;
        align-items: center;
    }
    p {
        flex: 1;
        overflow: hidden;
        word-wrap: normal; 
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #9a9ea4;
    }
    .label {
        display: inline-block;    /* zxx: 多余 */
        padding: 0 .1rem; margin: 0 .1rem;
        border: 1px solid;
        border-radius: .1rem;
        font-size: .8rem;
    }
    .label[data-label="1"] {
        color: #969ba3;
        border-color: #d5d7da;
    }
    .label[data-label="2"] {
        color: #ee4e54;
        border-color: #f9babc;
    }
    .label[data-label="3"] {
        color: #498bed;
        border-color: #bfd4f9;
    }

第二题： 我没做出来

ZhangXDong avatar Jul 17 '19 12:07 ZhangXDong

demo(暂未兼容 IE8)

div {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

#test1 h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#test2 h2 {
  direction: rtl;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

ol {
  padding: 0px;
  white-space: nowrap;
}

ol li {
  display: inline;
  border: 1px solid black;
}

ghost avatar Jul 17 '19 12:07 ghost

demo float都快不会用了

.title {
    margin-top: 10px;
    line-height: 1;
    font-size: 20px;
    color: #999;
    white-space: nowrap;
}

.title-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.title-text-dleft {
    direction: rtl;
    text-align: left;
}

.title-right {
    float: right;
}

.title-tag {
    float: left;
    font-size: 14px;
    line-height: 18px;
    padding: 0 3px;
    border: 1px solid;
    margin-left: 7px;
}

.title-category {
    color: #999;
    cursor: pointer;
}

.title-status {
    color: red;
    cursor: pointer;
}

.title-count {
    color: #5391ef;
}

<div>
    <div class="title">
        <div class="title-right">
            <a class="title-tag title-category">都市</a>
            <a class="title-tag title-status">连载中</a>
            <span class="title-tag title-count">54.82万字</span>
        </div>
        <a class="title-text">这一次是一个新的故事</a>
    </div>
    <div class="title">
        <div class="title-right">
            <a class="title-tag title-category">都市</a>
            <a class="title-tag title-status">连载中</a>
            <span class="title-tag title-count">54.82万字</span>
        </div>
        <a class="title-text title-text-dleft">这一次是一个新的故事</a>
    </div>
</div>

livetune avatar Jul 17 '19 13:07 livetune

jsbin

.title {
    margin-top: 12px;
    margin-bottom: 12px;
    white-space: nowrap;
    color: #969ba3;
    font-size: 20px;
}

.title-reverse .title-content{
  direction: rtl;
  text-align: left;
}

.title-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.title-badge-container {
    float: right;
    word-spacing: -2px;
}

.badge {
    display: inline-block;
    position: relative;
    top: -2px;
    padding: 0 2px;
    border: 1px solid;
    border-radius: 2px;
    font-size: 14px;
    line-height: 1.43em;
}

[data-type=default] {
    border-color: #d5d7da;
    color: #9da2a9;
}

[data-type=warn] {
    border-color: #fbcbcc;
    color: #ee4e54;
}

[data-type=info] {
    border-color: #bfd4f9;
    color: #6499f0;
}

<h3 class="title">
    <span class="title-badge-container">
        <span class="badge" data-type="default">
            都市
        </span>
        <span class="badge" data-type="warn">
            连载中
        </span>
        <span class="badge" data-type="info">
            54.82万字
        </span>
    </span>
    <span class="title-content">这次是一个新的故事新的故事新的故事新的故事新的故事</span>
</h3>
<h3 class="title">
    <span class="title-badge-container">
        <span class="badge" data-type="default">
            都市
        </span>
        <span class="badge" data-type="warn">
            完本
        </span>
        <span class="badge" data-type="info">
            1万字
        </span>
    </span>
    <span class="title-content">穿越天地复苏的平行世界穿越天地复苏的平行世界</span>
</h3>
<h3 class="title">
    <span class="title-badge-container">
        <span class="badge" data-type="default">
            科幻
        </span>
        <span class="badge" data-type="warn">
            完本
        </span>
        <span class="badge" data-type="info">
            1059.98万字
        </span>
    </span>
    <span class="title-content">修真四万年</span>
</h3>

<h3 class="title title-reverse">
    <span class="title-badge-container">
        <span class="badge" data-type="default">
            都市
        </span>
        <span class="badge" data-type="warn">
            连载中
        </span>
        <span class="badge" data-type="info">
            54.82万字
        </span>
    </span>
    <span class="title-content">浩劫余生，终见光明。浩劫余生，终见光明</span>
</h3>
<h3 class="title title-reverse">
    <span class="title-badge-container">
        <span class="badge" data-type="default">
            都市
        </span>
        <span class="badge" data-type="warn">
            完本
        </span>
        <span class="badge" data-type="info">
            1万字
        </span>
    </span>
    <span class="title-content">平行世界，偶获诸天聊天群</span>
</h3>
<h3 class="title title-reverse">
    <span class="title-badge-container">
        <span class="badge" data-type="default">
            科幻
        </span>
        <span class="badge" data-type="warn">
            完本
        </span>
        <span class="badge" data-type="info">
            1059.98万字
        </span>
    </span>
    <span class="title-content">修真四万年</span>
</h3>

liyongleihf2006 avatar Jul 17 '19 13:07 liyongleihf2006

首先想到了用 display: table 方案，但几经尝试没 hold 住，后改用 float 实现：> 在线 Demo <

  1. 为了兼容 IE8 下右浮动元素与非浮动元素的对齐，HTML 标签顺序未能与可视效果相一致（界面显示上标题在前，标签在后，而 HTML 代码中标签在前，标题在后）；
  2. 第 2 题，宽度不足时会截断标题文本，其他浏览器是从左侧开始截断的（符合题意），而 IE（8~11）下是从右侧开始截断的。
<!-- 1 -->
<ul class="book-list">
  <li class="book-list-item">      
    <div class="book-tags">
      <span class="tag">都市</span>
      <span class="tag" theme="red">连载中</span>
      <span class="tag" theme="blue">54.82万字</span>
    </div>
    <h3 class="book-title">
      <a class="book-title-link" href="##">这次是一个新的故事。浩劫余生，终见光明</a>
    </h3>
  </li>
  <li class="book-list-item">
    <div class="book-tags">
      <span class="tag">都市</span>
      <span class="tag" theme="red">完本</span>
      <span class="tag" theme="blue">1万字</span>
    </div>
    <h3 class="book-title">
      <a class="book-title-link" href="##">穿越天地复苏的平行世界，偶获诸天聊天群</a>
    </h3>
  </li>
  <li class="book-list-item">
    <div class="book-tags">
      <span class="tag">科幻</span>
      <span class="tag" theme="red">完本</span>
      <span class="tag" theme="blue">1059.98万字</span>
    </div>
    <h3 class="book-title">
      <a class="book-title-link" href="##">修真四万年</a>
    </h3>
  </li>
  <li class="book-list-item">
    <div class="book-tags">
      <span class="tag">童话</span>
      <span class="tag" theme="red">完本</span>
      <span class="tag" theme="blue">1万字</span>
    </div>
    <h3 class="book-title">
      <a class="book-title-link" href="##">The quick brown fox jumps over a lazy dog.</a>
    </h3>
  </li>
</ul>

<!-- 2 -->
<ul class="book-list is-inverse">
  <li class="book-list-item">      
    <div class="book-tags">
      <span class="tag">都市</span>
      <span class="tag" theme="red">连载中</span>
      <span class="tag" theme="blue">54.82万字</span>
    </div>
    <h3 class="book-title">
      <a class="book-title-link" href="##">这次是一个新的故事。浩劫余生，终见光明</a>
    </h3>
  </li>
  <li class="book-list-item">
    <div class="book-tags">
      <span class="tag">都市</span>
      <span class="tag" theme="red">完本</span>
      <span class="tag" theme="blue">1万字</span>
    </div>
    <h3 class="book-title">
      <a class="book-title-link" href="##">穿越天地复苏的平行世界，偶获诸天聊天群</a>
    </h3>
  </li>
  <li class="book-list-item">
    <div class="book-tags">
      <span class="tag">科幻</span>
      <span class="tag" theme="red">完本</span>
      <span class="tag" theme="blue">1059.98万字</span>
    </div>
    <h3 class="book-title">
      <a class="book-title-link" href="##">修真四万年</a>
    </h3>
  </li>
  <li class="book-list-item">
    <div class="book-tags">
      <span class="tag">童话</span>
      <span class="tag" theme="red">完本</span>
      <span class="tag" theme="blue">1万字</span>
    </div>
    <h3 class="book-title">
      <a class="book-title-link" href="##">The quick brown fox jumps over a lazy dog.</a>
    </h3>
  </li>
</ul>

.book-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.book-list-item {
  margin: .8em 0;
  line-height: 1.2;
  font-size: 18px;
}
.book-list-item:after {
  content: "";
  clear: both;
  display: table;
}

.book-title {
  margin: 0;
  font-size: 100%;
  font-weight: 500;
}

.book-title-link {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  text-decoration: none;
  color: #9da2a9;
}
.book-title-link:hover {color: #498bed;}

.is-inverse .book-title-link {direction: rtl;}

.book-tags {
  float: right;
  margin-left: 1em;
}    
.tag {
  display: inline-block;
  padding: 3px;
  white-space: nowrap;
  line-height: 1;
  font-size: 82%;
  color: #9da2a9;
  border: 1px solid;
  border-radius: 2px;
}
.tag[theme="red"] {color: #ee4e54;}
.tag[theme="blue"] {color: #498bed;}

wingmeng avatar Jul 17 '19 13:07 wingmeng

demo

<div class="container">
  <div class="title">titlethisisistielkkeld</div>
  <div class="tag">
    <span>tag1</span>
    <span>tag2</span>
  </div>
</div>

<div class="container is-rtl">
  <div class="title">titlethisisistielkkeld</div>
  <div class="tag">
    <span>tag1</span>
    <span>tag2</span>
  </div>
</div>

.container {
  display: flex;
  background: #ccc;
  width: 200px
}
.title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #a2a5ac;
  margin-right: auto;
}
.tag {
  display: inline-flex;
}
.tag span {
  border: 1px solid;
  padding: 2px 3px;
  margin-left: 4px;
}

.is-rtl .title{
  direction: rtl;
  text-align:left;
}
.is-rtl {
  margin-top:20px;
}

GitHdu avatar Jul 17 '19 15:07 GitHdu

demo

        * {
            padding: 0;
            margin: 0;
        }
        ul,li{
            list-style: none;
        }
        .content-list{
            margin: 10px 0;
        }
        .content-item{
            display: flex;
            line-height: 30px;
            height: 30px;
            margin: 10px 0;
        }
        .content-label{
            flex-shrink: 0;
        }
        .label{
            border: 1px solid #ccc;
            padding: 3px;
            margin: 0 3px;
            border-radius: 5px;
        }
        .label-type{
            color: #ccc;
        }
        .label-status{
            color: #f00;
        }
        .label-num{
            color: #00f;
        }
        .desc{
            flex-grow: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .reverse  .desc{
            direction: rtl;
        }

<ul class="content-list">
    <li class="content-item">
        <p class="desc">这是个新的故事新的故事新的故事新的故事新的故事新的故事新的故事新的故事新的故事新的故事新的故事新的故事新的故事</p>
        <div class="content-label">
            <span class="label label-type">都市</span>
            <span class="label label-status">连载</span>
            <span class="label label-num">1万字</span>
        </div>
    </li>
    <li class="content-item">
        <p class="desc">这是个新的故事</p>
        <div class="content-label">
            <span class="label label-type">科幻</span>
            <span class="label label-status">完本</span>
            <span class="label label-num">1059.98万字</span>
        </div>
    </li>
</ul>

<ul class="content-list reverse">
    <li class="content-item">
        <p class="desc">这是个新的故事新的故事新的故事新的故事新的故事新的故事新的故事新的故事新的故事新的故事新的故事新的故事新的故事</p>
        <div class="content-label">
            <span class="label label-type">都市</span>
            <span class="label label-status">连载</span>
            <span class="label label-num">1万字</span>
        </div>
    </li>
    <li class="content-item">
        <p class="desc">这是个新的故事</p>
        <div class="content-label">
            <span class="label label-type">科幻</span>
            <span class="label label-status">完本</span>
            <span class="label label-num">1059.98万字</span>
        </div>
    </li>
</ul>

guqianfeng avatar Jul 17 '19 15:07 guqianfeng

Demo https://codepen.io/crazyboy/pen/aeoamR

<div>
	<div class="book-item">
		<div class="book-tag-list">
			<span class="book-tag">都市</span>
			<span class="book-tag font-red">连载中</span>
			<span class="book-tag font-blue">54.82万字</span>
		</div>
		<div class="book-description">这次是一个新的故事。浩劫余生，终见光明</div>
	</div>
	<div class="book-item">
		<div class="book-tag-list">
			<span class="book-tag">都市</span>
			<span class="book-tag font-red">完本</span>
			<span class="book-tag font-blue">1万字</span>
		</div>
		<div class="book-description">穿越天地复苏的平行世界，偶或诸天聊天群</div>
	</div>
	<div class="book-item">
		<div class="book-tag-list">
			<span class="book-tag">科幻</span>
			<span class="book-tag font-red">完本</span>
			<span class="book-tag font-blue">1059.98万字</span>
		</div>
		<div class="book-description">修真四万年</div>
	</div>
</div>
<div class="reverse-description">
	<div class="book-item">
		<div class="book-tag-list">
			<span class="book-tag">都市</span>
			<span class="book-tag font-red">连载中</span>
			<span class="book-tag font-blue">54.82万字</span>
		</div>
		<div class="book-description">这次是一个新的故事。浩劫余生，终见光明</div>
	</div>
	<div class="book-item">
		<div class="book-tag-list">
			<span class="book-tag">都市</span>
			<span class="book-tag font-red">完本</span>
			<span class="book-tag font-blue">1万字</span>
		</div>
		<div class="book-description">穿越天地复苏的平行世界，偶或诸天聊天群</div>
	</div>
	<div class="book-item">
		<div class="book-tag-list">
			<span class="book-tag">科幻</span>
			<span class="book-tag font-red">完本</span>
			<span class="book-tag font-blue">1059.98万字</span>
		</div>
		<div class="book-description">修真四万年</div>
	</div>
</div>

.book-item {
	color: #9ba0a8;
	width: 300px;
	line-height: 180%;
	overflow: hidden;
}
.book-description {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.book-tag-list {
	float: right;
	text-align: right;
}
.book-tag {
	border: 1px solid;
	font-size: 0.8em;
	padding: 1px 5px;
	font-weight: 700;
	text-align: right;
	vertical-align: top;
}
.font-red {
	color: #f2787c;
}
.font-blue {
	color: #76a9f1;
}
.reverse-description .book-description {
	direction: rtl;
	text-align: left;
}

NeilChen4698 avatar Jul 17 '19 16:07 NeilChen4698

  1. https://codepen.io/9lk/pen/jgNjQq
<dl>
  <dd>
    <span class="cate">都市</span>
    <span class="state">连载中</span>
    <span class="words">54.82万字</span>
  </dd>
   <dt>这是一个新的故事这是一个新的故事这是一个新的故事</dt>
</dl>
<dl>
  <dd>
    <span class="cate">科幻</span>
    <span class="state">完本</span>
    <span class="words">1059.98万字</span>
  </dd>
    <dt>穿越天地复苏的平行世界穿越天地复苏的平行世界穿越天地复苏的平行世界</dt>
</dl>
<dl>
  <dd>
    <span class="cate">都市</span>
    <span class="state">完本</span>
    <span class="words">1万字</span>
  </dd>
    <dt>修真四万年</dt>
</dl>

dl {
  color: #666;
  white-space: nowrap;
}
dt {
  overflow:hidden;
  text-overflow: ellipsis;
}

dd {
  float:right;
}
  1. https://codepen.io/9lk/pen/YmKodd
dl {
  color: #666;
  white-space: nowrap;
  display:flex;
}
dt {
  flex:1;
  overflow:hidden;
  text-overflow: ellipsis;
  direction: rtl;
}

9lk avatar Jul 17 '19 23:07 9lk

【demo】 兼容ie10

* {
  padding: 0;
  margin: 0;
}
@media screen and (min-width: 375px) {
  html {
    font-size: calc(100% + 2 * (100vw - 375px) / 39);
    font-size: calc(16px + 2 * (100vw - 375px) / 39);
  }
}
@media screen and (min-width: 414px) {
  html {
    font-size: calc(112.5% + 2 * (100vw - 414px) / 586);
    font-size: calc(18px + 2 * (100vw - 414px) / 586);
  }
}
ul, li {
  list-style: none;
}
.article {
  width: 100%;
  max-width: 800px;
  margin: auto;
}
.article-item {
  display: flex;
}
.article-item__title {
  color: #9A9EA4;
  font-size: 1rem;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.article-item__title.prefix {
  direction: rtl;
}
.article-item__tags {
  float: right;
  margin-left: 5px;
}
.article-item__tags span {
  padding: 0 3px;
  font-size: 0.73rem;
  border-radius: 2px;
}
.article-item__tags__category {
  color: #A5ABB1;
  border: 1px solid #A5ABB1;
}
.article-item__tags__status {
  color: #EE4E54;
  border: 1px solid #EE4E54;
}
.article-item__tags__count {
  color: #5391EF;
  border: 1px solid #5391EF;
}

<div class="article">
  <ul class="article-list">
    <li class="article-item">
      <div class="article-item__title suffix">这次是一个新的故事。浩劫余生终见光明</div>
      <div class="article-item__tags">
        <span class="article-item__tags__category">都市</span>
        <span class="article-item__tags__status">连载中</span>
        <span class="article-item__tags__count">54.82万字</span>
      </div>
    </li>
    <li class="article-item">
      <div class="article-item__title suffix">穿越天地复苏的平行世界偶获诸天聊天群</div>
      <div class="article-item__tags">
        <span class="article-item__tags__category">都市</span>
        <span class="article-item__tags__status">完本</span>
        <span class="article-item__tags__count">1万字</span>
      </div>
    </li>
    <li class="article-item">
      <div class="article-item__title suffix">修真四万年</div>
      <div class="article-item__tags">
        <span class="article-item__tags__category">科幻</span>
        <span class="article-item__tags__status">完本</span>
        <span class="article-item__tags__count">1059.98万字</span>
      </div>
    </li>
  </ul>
  <ul class="article-list">
    <li class="article-item">
      <div class="article-item__title prefix">这次是一个新的故事。浩劫余生终见光明</div>
      <div class="article-item__tags">
        <span class="article-item__tags__category">都市</span>
        <span class="article-item__tags__status">连载中</span>
        <span class="article-item__tags__count">54.82万字</span>
      </div>
    </li>
    <li class="article-item">
      <div class="article-item__title prefix">穿越天地复苏的平行世界偶获诸天聊天群</div>
      <div class="article-item__tags">
        <span class="article-item__tags__category">都市</span>
        <span class="article-item__tags__status">完本</span>
        <span class="article-item__tags__count">1万字</span>
      </div>
    </li>
    <li class="article-item">
      <div class="article-item__title prefix">修真四万年</div>
      <div class="article-item__tags">
        <span class="article-item__tags__category">科幻</span>
        <span class="article-item__tags__status">完本</span>
        <span class="article-item__tags__count">1059.98万字</span>
      </div>
    </li>
  </ul>
</div>

JaimeCheng avatar Jul 18 '19 02:07 JaimeCheng

demo

<ul>
  <li class="list">
    <div class="tag">
      <i class="tag--gray">都市</i>
      <i class="tag--red">连载中</i>
      <i class="tag--blue">58.62万字</i>
    </div>
    <h3>这是一个新的故事这是一个新的故事</h3>
  </li>
  <li class="list">
    <div class="tag">
      <i class="tag--gray">都市</i>
      <i class="tag--red">完本</i>
      <i class="tag--blue">1万字</i>
    </div>
    <h3>穿越天地的复苏的平行世界穿越天地的复苏的平行世界</h3>
  </li>
  <li class="list">
    <div class="tag">
      <i class="tag--gray">科幻</i>
      <i class="tag--red">完本</i>
      <i class="tag--blue">1059.98万字</i>
    </div>
    <h3>修真四万年</h3>
  </li>
</ul>
<ul>
  <li class="list">
    <div class="tag">
      <i class="tag--gray">都市</i>
      <i class="tag--red">连载中</i>
      <i class="tag--blue">58.62万字</i>
    </div>
    <h3 class="reserve">这是一个新的故事这是一个新的故事</h3>
  </li>
  <li class="list">
    <div class="tag">
      <i class="tag--gray">都市</i>
      <i class="tag--red">完本</i>
      <i class="tag--blue">1万字</i>
    </div>
    <h3 class="reserve">穿越天地的复苏的平行世界穿越天地的复苏的平行世界</h3>
  </li>
  <li class="list">
    <div class="tag">
      <i class="tag--gray">科幻</i>
      <i class="tag--red">完本</i>
      <i class="tag--blue">1059.98万字</i>
    </div>
    <h3 class="reserve">修真四万年</h3>
  </li>
</ul>

ul {
  margin: 0;
  padding: 0;
}
.list {
  overflow: hidden;
}
.list h3 {
  margin: 0;
  font-size: 16px;
  color: #999;
  overflow: hidden;
  /*超出部分隐藏*/
  text-overflow: ellipsis;
  /* 超出部分显示省略号 */
  white-space: nowrap;
  /*规定段落中的文本不进行换行 */
  line-height: 1.5;
}
.list h3.reserve {
  direction: rtl;
}
.tag {
  float: right;
}
i.tag--gray {
  color: #999;
}
i.tag--red {
  color: red;
}
i.tag--blue {
  color: blue;
}
i {
  font-style: normal;
  border: 1px solid;
  border-radius: 3px;
  font-size: 14px;
  margin-left: 3px;
  padding: 0 3px;
}

sghweb avatar Jul 18 '19 03:07 sghweb

demo：https://codepen.io/wghwebitem/pen/aebOBo

ul {
				list-style: none;
				padding: 0;
				margin: 0;
			}
			
			.comdot {
				line-height: 34px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.ellip {
				width: 100%;
				height: 35px;
				display: flex;
				justify-content: space-between;
				margin-top: 10px;
			}
			
			.ellip-font {
				height: 35px;
				margin-top: 0;
			}
			
			.ellip-div {
				height: 35px;
				display: flex;
			}
			
			.ellip-div button {
				display: inline-block;
				border: 1px solid;
				border-radius: 3px;
				padding: 0 10px;
				background: none;
				float: right;
			}
			
			.ellip-div button[alt="gray"] {
				color: gray;
			}
			
			.ellip-div button[alt="red"] {
				color: red;
			}
			
			.ellip-div button[alt="blue"] {
				color: dodgerblue;
			}
			
			.ellip-div button:not(:last-child) {
				margin-right: 5px;
			}
			
			.dlrt .ellip-font {
				direction: rtl;
			}
<!--第一题-->
		<ul>
			<li class="ellip">
				<p class="comdot ellip-font">弹出框弹出框弹出框弹出框弹出框弹出框弹出框弹出框弹</p>
				<div class="ellip-div">
					<button class="comdot" alt="gray">都市</button>
					<button class="comdot" alt="red">加载中</button>
					<button class="comdot" alt="blue">54.82万字</button>
				</div>
			</li>
			<li class="ellip">
				<p class="comdot ellip-font">弹出框弹出框弹出框弹出框弹出框弹出框弹出框弹出框弹出框弹出框弹出框弹出框弹出框弹出框</p>
				<div class="ellip-div">
					<button class="comdot" alt="gray">都市</button>
					<button class="comdot" alt="red">文本</button>
					<button class="comdot" alt="blue">1万字</button>
				</div>
			</li>
			<li class="ellip">
				<p class="comdot ellip-font">弹出框弹出框</p>
				<div class="ellip-div">
					<button class="comdot" alt="gray">科幻</button>
					<button class="comdot" alt="red">完本</button>
					<button class="comdot" alt="blue">1902.98万字</button>
				</div>
			</li>
		</ul>
		<!--第二题-->
		<ul>
			<li class="ellip dlrt">
				<p class="comdot ellip-font" style="text-align: right;">弹出框弹出框弹出框弹出框弹出框弹出框弹出框弹出框弹1</p>
				<div class="ellip-div">
					<button class="comdot" alt="gray">都市</button>
					<button class="comdot" alt="red">加载中</button>
					<button class="comdot" alt="blue">54.82万字</button>
				</div>

			</li>
			<li class="ellip dlrt">
				<p class="comdot ellip-font">弹出框弹出框弹出框弹出框弹出框弹出框弹出框弹出框弹出框弹出框弹出框弹出框弹出框弹出框</p>
				<div class="ellip-div">
					<button class="comdot" alt="gray">都市</button>
					<button class="comdot" alt="red">文本</button>
					<button class="comdot" alt="blue">1万字</button>
				</div>
			</li>
			<li class="ellip dlrt">
				<p class="comdot ellip-font"><span>弹出框弹出框1</span></p>
				<div class="ellip-div">
					<button class="comdot" alt="gray">科幻</button>
					<button class="comdot" alt="red">完本</button>
					<button class="comdot" alt="blue">1902.98万字</button>
				</div>
			</li>
		</ul>

WGHwebitem avatar Jul 18 '19 03:07 WGHwebitem

Demo

<ul class="text-ellipsis">
  <li>
    <div class="book-item">
      <label class="book-title">
        这是一个新的故事这是一个新的故事这是一个新的这是一个新的故事这是一个新的故事这是一个新的这是一个新的故事这是一个新的故事这是一个新的这是一个新的故事这是一个新的故事这是一个新的
      </label>
      <label class="book-label book-type">
        都市
      </label>
      <label class="book-label book-status">
        连载中
      </label>
      <label class="book-label book-size">
        58.82万字
      </label>
    </div>
  </li>
 ......
</ul>

<ul class="text-rtl">
  <li>
    <div class="book-item">
      <label class="book-title">
        这是一个新的故事这是一个新的故事这是一个新的这是一个新的故事这是一个新的故事这是一个新的这是一个新的故事这是一个新的故事这是一个新的这是一个新的故事这是一个新的故事这是一个新的
      </label>
      <label class="book-label book-type">
        都市
      </label>
      <label class="book-label book-status">
        连载中
      </label>
      <label class="book-label book-size">
        58.82万字
      </label>
    </div>
  </li>
  ......
</ul>

使用flex为标题label设置flex参数，通过设置direction: rtl;让标题前部内容以省略号显示。

li{
  list-style-type:none;
  margin: 10px 5px;
}

.book-item {
  display: flex;
  flex-direction: column；;
}
.text-ellipsis .book-title {
  flex: 5;
  color: grey;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.text-rtl .book-title {
  flex: 5;
  color: #B0BEC5;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  direction: rtl;
}
.book-label {
  color: #B0BEC5;
  border: 1px #B0BEC5 solid;
  border-radius: 2px;
  padding-left: 2px;
  padding-right: 2px;
  margin-left: 5px;
  margin-right: 5px;
}
.book-type {
  color: #B0BEC5;
  border: 1px #B0BEC5 solid;
}
.book-status {
  color: #F44336;
  border: 1px #F44336 solid;
}
.book-size {
  color: #2196F3;
  border: 1px #2196F3 solid;
}

lifelikejuly avatar Jul 18 '19 03:07 lifelikejuly

在线demo

* {
      margin: 0;
      padding: 0;
    }

    .test9-one-item {
      margin: 10px;
    }

    .test9-one-item p {
      text-overflow: ellipsis;
      /* word-break: keep-all; */
      white-space: nowrap;
      overflow: hidden;
    }

    .test9-one-mark-statu {
      color: red;
    }

    .test9-one-mark-count {
      color: blue;
    }

    .test9-one-mark-type {
      color: gray;
    }

    .test9-one-mark {
      border: 1px solid;
      border-radius: 2px;
      margin-left: 3px;
      /* display: inline-block; */
      /* vertical-align: middle; */
    }

    .test9-one-item-mark {
      vertical-align: middle;
      float: right;
    }

 .test9-two {
      direction: rtl; /* 上次聊天记录那次小测,测过这个知识点 */
   }

<div class="test9-one-item test9-one">
    <div class="test9-one-item-mark">
      <span class="test9-one-mark test9-one-mark-type">都市</span><span
        class="test9-one-mark test9-one-mark-statu">连载中</span><span
        class="test9-one-mark test9-one-mark-count">54.82万字</span>
    </div>
    <p>这次是一个新的故事这次是一个新的故事这次是一个新的故事这次是一个新的故事</p>
  </div>
  <div class="test9-one-item test9-two">
    <div class="test9-one-item-mark">
      <span class="test9-one-mark test9-one-mark-type">都市</span><span
        class="test9-one-mark test9-one-mark-statu">连载中</span><span
        class="test9-one-mark test9-one-mark-count">54.82万字</span>
    </div>
    <p>这次是一个新的故事这次是一个新的故事这次是一个新的故事这次是一个新的故事</p>
  </div>

les-lee avatar Jul 18 '19 03:07 les-lee

demo

CSS 样式 
html {
  min-width: 350px;
  font: status-bar;
}
.article {
  list-style: none;
  margin: 0;
  padding: 0;
}
.article-item {
  line-height: 24px;
}
.article-info {
  float: right;
  font-size: 0;
  margin-left: 6px;
}
.article-title {
  font-size: 18px;
  color: #a2a9b6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.article-info-label {
  display: inline-block;
  line-height: 20px;
  font-size: 14px;
  font-weight: bold;
  padding: 1px 2px;
  border: 1px solid;
  border-radius: 2px;
  margin-left: 4px;
}
.article-info-type {
  color: #a2a9b6;
  border-color: #cad1de
}
.article-info-end {
  color: #f4615c;
  border-color: #ff9d98;
}
.article-info-nums {
  color: #2486ff;
  border-color: #60c2ff;
}
.article-title {
  margin: 10px 0;
}
.article-reserve .article-title {
  /* IE8 浏览器使用 direction 时，text-align 会变为 right */
  text-align: left;
  direction: rtl;
}
html 格式 
<ul class="article">
    <li class="article-item">
      <div class="article-info">
        <span class="article-info-label  article-info-type">都市</span>
        <span class="article-info-label  article-info-end">连载中</span>
        <span class="article-info-label  article-info-nums">54.82万字</span>
      </div>
      <h3 class="article-title">
        这次是一个新的故事这次是一个新的故事这次是一个新的故事
      </h3>
    </li>
    <li class="article-item">
      <div class="article-info">
        <span class="article-info-label  article-info-type">都市</span>
        <span class="article-info-label  article-info-end">完本</span>
        <span class="article-info-label  article-info-nums">1万字</span>
      </div>
      <h3 class="article-title">
        穿越天地复苏的平行世界穿越天地复苏的平行世界穿越天地复苏的平行世界
      </h3>
    </li>
    <li class="article-item">
      <div class="article-info">
        <span class="article-info-label  article-info-type">科幻</span>
        <span class="article-info-label  article-info-end">完本</span>
        <span class="article-info-label  article-info-nums">1059.98万字</span>
      </div>
      <h3 class="article-title">修真四万年</h3>
    </li>
  </ul>
  <ul class="article article-reserve">
    <li class="article-item">
      <div class="article-info">
        <span class="article-info-label  article-info-type">都市</span>
        <span class="article-info-label  article-info-end">连载中</span>
        <span class="article-info-label  article-info-nums">54.82万字</span>
      </div>
      <h3 class="article-title">
        这次是一个新的故事这次是一个新的故事这次是一个新的故事
      </h3>
    </li>
    <li class="article-item">
      <div class="article-info">
        <span class="article-info-label  article-info-type">都市</span>
        <span class="article-info-label  article-info-end">完本</span>
        <span class="article-info-label  article-info-nums">1万字</span>
      </div>
      <h3 class="article-title">
        穿越天地复苏的平行世界穿越天地复苏的平行世界穿越天地复苏的平行世界
      </h3>
    </li>
    <li class="article-item">
      <div class="article-info">
        <span class="article-info-label  article-info-type">科幻</span>
        <span class="article-info-label  article-info-end">完本</span>
        <span class="article-info-label  article-info-nums">1059.98万字</span>
      </div>
      <h3 class="article-title">修真四万年</h3>
    </li>
  </ul>

Despair-lj avatar Jul 18 '19 05:07 Despair-lj

  1. demo 
body, p {
	margin: 0;
}

.item {
	display: flex;
	justify-content: space-between;
}
p {
	font-size: 18px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.tags {
	white-space: nowrap;
}
.tags span {
	border: 1px solid;
	white-space: nowrap;
	font-size: 12px;
}

<div class="item">
		<p>这次是一个新的故事, 新的故事， 故事， 事</p>
		<div class="tags">
			<span class="tag">都市</span>
			<span class="tag">连载中</span>
			<span class="tag">连载中</span>
			<span class="tag">连载中</span>
			<span class="tag">连载中</span>
		</div>
	</div>
	<div class="item">
		<p>本周小测直播答疑为本周六7月20日上午10:00，大约30分钟</p>
		<div class="tags">
			<span class="tag">都市</span>
			<span class="tag">连载中</span>
		</div>
	</div>
	<div class="item">
		<p>首位答题者有机会被翻牌，每位答题者都可获得2积分底分</p>
		<div class="tags">
			<span class="tag">都市</span>
			<span class="tag">连载中</span>
		</div>
	</div>
  1. demo2 css同demo1, 移除注释即可
body, p {
	margin: 0;
}

.item {
	display: flex;
	justify-content: space-between;
}
p {
        direction: rtl;  /* 第二题打开 */
	font-size: 18px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.tags {
	white-space: nowrap;
}
.tags span {
	border: 1px solid;
	white-space: nowrap;
	font-size: 12px;
}

flyinglove avatar Jul 18 '19 07:07 flyinglove

  1. 标题后面点点点：demo 
<ul>
  <li>
    <div class="label">
      <span class="type">都市</span>
      <span class="status">连载中</span>
      <span class="words">54.82万字</span>
    </div>
    <div class="title">
      这是一个长的标题内容，占据除标签外的剩余空间，超出部分用点点点显示。这是一个长的标题内容，占据除标签外的剩余空间，超出部分用点点点显示。这是一个长的标题内容，占据除标签外的剩余空间，超出部分用点点点显示
    </div>
  </li>
  <li>
    <div class="label">
      <span class="type">科幻</span>
      <span class="status">完本</span>
      <span class="words">1059.34万字</span>
    </div>
    <div class="title">
      这是一个短的标题内容，占据除标签外的剩余空间，超出部分用点点点显示     
    </div>
  </li>
</ul>

li {
  list-style: none;
  margin-bottom: 10px;
}
.label {
  float: right;
}
span {
  padding: 2px;
}
.type {
  color: #86888a;
  border: 1px solid #dee0e2;
}
.status {
  color: #ef6049;
  border: 1px solid #efc1b9;
}
.words {
  color: #54a8e4;
  border: 1px solid #aed3ec;
}

.title {
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
  1. 标题后面点点点：demo html同第1题，css给class为title的元素增加direction: rtl; 其余与第1题相同
.title {
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;   /* zxx:这个很多年前就不需要了 */
  white-space: nowrap;
  overflow: hidden;
  direction: rtl;
}

ylqlalala avatar Jul 18 '19 07:07 ylqlalala

demo

html

    <div class="item-wrapper">
        <div class="title">上帝的滴滴大口大口大口大口抖擞的滴滴大口大口大口大口抖擞诶的劳滴滴都诶的劳斯莱斯诶诶诶额</div>
        <div class="tags">
            <div class="tag">都市</div>
            <div class="tag red">连载中</div>
            <div class="tag blue">328万字</div>
        </div>
    </div>
    <div class="item-wrapper">
        <div class="title">上帝的滴滴大口大口大口大口抖擞诶的劳滴滴都大口大口大口抖大口大口大口大口大口抖擞诶的劳滴滴都大口抖擞诶的劳滴滴都擞诶的劳滴滴都搜搜斯莱斯诶诶诶额</div>
        <div class="tags">
            <div class="tag">都市</div>
            <div class="tag red">完本</div>
            <div class="tag blue">8万字</div>
        </div>
    </div>
    <div class="item-wrapper">
        <div class="title">上帝的滴滴大口大口大口</div>
        <div class="tags">
            <div class="tag">都市</div>
            <div class="tag red">连载中</div>
            <div class="tag blue">5324.8万字</div>
        </div>
    </div>

css

    .item-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #ccc;
    }
    .title {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 16px;
        line-height: 18px;
    }
    .tags{
        white-space: nowrap;
    }
    .tag {
        display: inline-block;
        white-space: nowrap;
        font-size: 14px;
        line-height: 16px;
        border: 1px solid;
        margin: 0 2px;
    }
    .red {
        color: #c43a5a;
    }
    .blue {
        color: #7eadf0;
    }

对于第二小题，其他的不变，给.title类多加一个属性direction: rtl

fzpijl avatar Jul 18 '19 08:07 fzpijl

demo

<style>
    .box {
      font-size: 16px;
      margin: 5px 0;
    }
    .box .fr {
      float: right;
      margin-left: 5px;
      border: 1px solid;
      padding: 0 4px;
      border-radius: 2px;
    }
    .title {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 19px;
      color: #888;
    }
    .title2 {
      text-align: left;
      direction: rtl;
    }
    .len {
      color: #2b8ac7;
    }
    .rate {
      color: #e82e2e;
    }
    .type {
      color: #999;
    }
</style>

  <h2>第1题</h2>
  <div class="box">
    <div class="fr len">54.82万字</div>
    <div class="fr rate">连载中</div>
    <div class="fr type">都市</div>
    <div class="title">这次是一个新的故事。浩劫余生，终见光明这次是一个新的故事。浩劫余生，终见光明</div>
  </div>
  <div class="box">
    <div class="fr len">1万字</div>
    <div class="fr rate">完本</div>
    <div class="fr type">都市</div>
    <div class="title">穿越天地复苏的平行世界,偶获诸天聊天群穿越天地复苏的平行世界,偶获诸天聊天群</div>
  </div>
  <div class="box">
    <div class="fr len">1059.98万字</div>
    <div class="fr rate">完本</div>
    <div class="fr type">科幻</div>
    <div class="title">修真四万年</div>
  </div>
  <h2>第2题</h2>
  <div class="box">
    <div class="fr len">54.82万字</div>
    <div class="fr rate">连载中</div>
    <div class="fr type">都市</div>
    <div class="title title2">这次是一个新的故事。浩劫余生，终见光明这次是一个新的故事。浩劫余生，终见光明</div>
  </div>
  <div class="box">
    <div class="fr len">1万字</div>
    <div class="fr rate">完本</div>
    <div class="fr type">都市</div>
    <div class="title title2">穿越天地复苏的平行世界,偶获诸天聊天群穿越天地复苏的平行世界,偶获诸天聊天群</div>
  </div>
  <div class="box">
    <div class="fr len">1059.98万字</div>
    <div class="fr rate">完本</div>
    <div class="fr type">科幻</div>
    <div class="title title2">修真四万年</div>
  </div>

xuejianrong avatar Jul 18 '19 11:07 xuejianrong

link css

 <style>
        .item {
            margin: 0 0 10px 0;
        }
        .tag {
            display: inline-block;
            border: 1px solid#aeafaf;
            padding: 0 2px;
        }
        .type {
            color: #aeafaf;
        }
        .status {
            color: #ee4e54;
        }
        .count {
            color: #669ef7;
        }
        .item-tag {
            float: right;
        }
        .item-tit {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        /*标题前打点 direction可控制水平溢出方向*/
        .rtl {
            direction: rtl;
            text-align: left;
        }
    </style>

<div class='item'>
        <div class='item-tag'>
            <div class='tag type'>都市</div>
            <div class='tag status'>连载中</div>
            <div class='tag count'>54.82万字</div>
        </div>
        <div class="item-tit">这次是一个新的故事这次是一个新的故事这次是一个新的故事这次是一个新的故事这次是一个新的故事</div>
    </div>
    <div class='item'>
        <div class='item-tag'>
            <div class='tag type'>都市</div>
            <div class='tag status'>完本</div>
            <div class='tag count'>1万字</div>
        </div>
        <div class="item-tit">这次是一个新的故事</div>
    </div>
    <div class='item'>
        <div class='item-tag'>
            <div class='tag type'>科幻</div>
            <div class='tag status'>完本</div>
            <div class='tag count'>1059.98万字</div>
        </div>
        <div class="item-tit">这次是一个新的故事这次是一个新的故事这次是一个新的故事这次是一个新的故事这次是一个新的故事</div>
    </div>
    <div class='item'>
        <div class='item-tag'>
            <div class='tag type'>科幻</div>
            <div class='tag status'>完本</div>
            <div class='tag count'>1059.98万字</div>
        </div>
        <div class="item-tit rtl">浩劫余生，终见光明浩劫余生，终见光明浩劫余生，终见光明浩劫余生，终见光明浩劫余生，终见光明浩劫余生，终见光明</div>
    </div>

whrice avatar Jul 18 '19 12:07 whrice

demo

.list{
  height: 40px;
  line-height: 40px;
}
.info{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.info.direction-rtl{
  direction: rtl;
  text-align: left;
}
.tags{
  float: right;
}
.tag{
  padding: 3px 5px;
  border: 1px solid;
  border-radius: 2px;
}
.tag.type{
  color: #aaa;
}
.tag.status{
  color: #f56c6c;
}
.tag.count{
  color: #0094e8;
}

<div class="list">
  <div class="tags">
    <span class="tag type">都市</span>
    <span class="tag status">连载中</span>
    <span class="tag count">54.84万字</span>
  </div>
  <div class="info">这次是一个新故事这次是一个新故事这次是一个新故事这次是一个新故事这次是一个新故事</div>
</div>

<div class="list">
  <div class="tags">
    <span class="tag type">都市</span>
    <span class="tag status">完本</span>
    <span class="tag count">1万字</span>
  </div>
  <div class="info">穿越天地复苏的平和世界</div>
</div>

<div class="list">
  <div class="tags">
    <span class="tag type">科幻</span>
    <span class="tag status">完本</span>
    <span class="tag count">1059.98万字</span>
  </div>
  <div class="info">修真四万年</div>
</div>

<div class="list">
  <div class="tags">
    <span class="tag type">都市</span>
    <span class="tag status">连载中</span>
    <span class="tag count">54.84万字</span>
  </div>
  <div class="info direction-rtl">这次是一个新故事这次是一个新故事这次是一个新故事这次是一个新故事这次是一个新故事</div>
</div>

<div class="list">
  <div class="tags">
    <span class="tag type">都市</span>
    <span class="tag status">完本</span>
    <span class="tag count">1万字</span>
  </div>
  <div class="info direction-rtl">穿越天地复苏的平和世界</div>
</div>

<div class="list">
  <div class="tags">
    <span class="tag type">科幻</span>
    <span class="tag status">完本</span>
    <span class="tag count">1059.98万字</span>
  </div>
  <div class="info direction-rtl">修真四万年</div>
</div>

asyncguo avatar Jul 18 '19 13:07 asyncguo

兼容IE8 demo

.title-container {
    font-size: 18px;
    height: 35px;
}

.title-content {
    color: #9ca1a8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.title-tag-box {
    float: right;
    white-space: nowrap;
    font-size: 14px;
}

.title-tag-item {
    display: inline-block;
    border: 1px solid;
    border-radius: 3px;
    padding: 2px;
}

.gray {
    color: #9ca1a8;
}

.red {
    color: #f06066;
}

.blue {
    color: #68a0f1;
}

.reverse {
    text-align: left;
    direction: rtl;
}

<div class="title-container">
    <div class="title-tag-box">
        <span class="title-tag-item gray">都市</span>
        <span class="title-tag-item red">连载中</span>
        <span class="title-tag-item blue">54.82万字</span>
    </div>
    <div class="title-content">这次是一个新的故事,亮亮亮亮亮来了</div>
</div>

<div class="title-container">
    <div class="title-tag-box">
        <span class="title-tag-item gray">都市</span>
        <span class="title-tag-item red">完本</span>
        <span class="title-tag-item blue">1万字</span>
    </div>
    <div class="title-content">穿越天地复苏的平行世界</div>
</div>

<div class="title-container">
    <div class="title-tag-box">
        <span class="title-tag-item gray">科幻</span>
        <span class="title-tag-item red">完本</span>
        <span class="title-tag-item blue">1059.98万字</span>
    </div>
    <div class="title-content">修真四万年</div>
</div>

<hr>

<div class="title-container">
    <div class="title-tag-box">
        <span class="title-tag-item gray">都市</span>
        <span class="title-tag-item red">连载中</span>
        <span class="title-tag-item blue">54.82万字</span>
    </div>
    <div class="title-content reverse">这次是一个新的故事,亮亮亮亮亮来了</div>
</div>

<div class="title-container">
    <div class="title-tag-box">
        <span class="title-tag-item gray">都市</span>
        <span class="title-tag-item red">完本</span>
        <span class="title-tag-item blue">1万字</span>
    </div>
    <div class="title-content reverse">穿越天地复苏的平行世界</div>
</div>

<div class="title-container">
    <div class="title-tag-box">
        <span class="title-tag-item gray">科幻</span>
        <span class="title-tag-item red">完本</span>
        <span class="title-tag-item blue">1059.98万字</span>
    </div>
    <div class="title-content reverse">修真四万年</div>
</div>

flex实现 demo

.title-container {
    font-size: 18px;
    height: 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title-content {
    flex: 0 1 auto;
    color: #9ca1a8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.title-tag-box {
    flex: none;
    white-space: nowrap;
    font-size: 14px;
}

.title-tag-item {
    display: inline-block;
    border: 1px solid;
    border-radius: 3px;
    padding: 2px;
}

.gray {
    color: #9ca1a8;
}

.red {
    color: #f06066;
}

.blue {
    color: #68a0f1;
}

.reverse {
    text-align: left;
    direction: rtl;
}

<div class="title-container">
    <div class="title-content">这次是一个新的故事,亮亮亮亮亮来了</div>
    <div class="title-tag-box">
        <span class="title-tag-item gray">都市</span>
        <span class="title-tag-item red">连载中</span>
        <span class="title-tag-item blue">54.82万字</span>
    </div>
</div>

<div class="title-container">
    <div class="title-content">穿越天地复苏的平行世界</div>
    <div class="title-tag-box">
        <span class="title-tag-item gray">都市</span>
        <span class="title-tag-item red">完本</span>
        <span class="title-tag-item blue">1万字</span>
    </div>

</div>

<div class="title-container">
    <div class="title-content">修真四万年</div>
    <div class="title-tag-box">
        <span class="title-tag-item gray">科幻</span>
        <span class="title-tag-item red">完本</span>
        <span class="title-tag-item blue">1059.98万字</span>
    </div>
</div>

<hr>

<div class="title-container">
    <div class="title-content reverse">这次是一个新的故事,亮亮亮亮亮来了</div>
    <div class="title-tag-box">
        <span class="title-tag-item gray">都市</span>
        <span class="title-tag-item red">连载中</span>
        <span class="title-tag-item blue">54.82万字</span>
    </div>
</div>

<div class="title-container">
    <div class="title-content reverse">穿越天地复苏的平行世界</div>
    <div class="title-tag-box">
        <span class="title-tag-item gray">都市</span>
        <span class="title-tag-item red">完本</span>
        <span class="title-tag-item blue">1万字</span>
    </div>
</div>

<div class="title-container">
    <div class="title-content reverse">修真四万年</div>
    <div class="title-tag-box">
        <span class="title-tag-item gray">科幻</span>
        <span class="title-tag-item red">完本</span>
        <span class="title-tag-item blue">1059.98万字</span>
    </div>
</div>

zy017 avatar Jul 18 '19 15:07 zy017

1.demo地址：https://codepen.io/347235420/pen/JgooVz 2.用的是flex布局

  • 这是一个标题这是一个标题这是一个标题这是一个标题
    都市 修仙 爽文
  • 这是一个标题这是一个标题这是一个标题这是一个标题
    都市 修仙 爽文

css： ul{ list-style: none; } .demo-list{ width: 400px; margin: 5px auto; display: flex; justify-content: space-between; } .demo-title{ flex-grow: 1; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; line-height: 24px; } .demo-tags{ flex-grow: 0; flex-shrink: 0; } .demo-tags span{ border: 1px solid; border-radius: 6px; padding: 0 2px; }

    .demo-title-reverse{
        direction: rtl;
    }

347235420 avatar Jul 19 '19 02:07 347235420

在线DEMO

未兼容IE8

<ul class="box">
  <li class="list">
    <span class="list-content list-content-ltr">这次是一个新的故事这次是一个新的故事这次是一个新的故事这次是一个新的故事</span>
    <div class="tag-group">
      <span class="tag tag-gray">都市</span>
      <span class="tag tag-red">连载中</span>
      <span class="tag tag-blue">53.82万字</span>
    </div>
  </li>
</ul>

html, body, ul, p {
  margin: 0;
  padding: 0;
}

ul, li {
  list-style: none;
}

.box {
  border: 1px solid #e0e0e0;
  padding: 20px 10px;
  margin: 20px auto;
}

.list {
  margin-bottom: 12px;
  display: flex;
}

.list-content {
  display: inline-block;
  width: 100%;
  height: 20px;
  word-break: break-all;
  white-space:nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 1;
}

.list-content-rtl {
  direction: rtl;
}

.list-content-ltr {
  direction: ltr;
}

.tag-group {
  font-size: 0;
  float: right;
}

.tag {
  display: inline-block;
  height: 20px;
  padding: 0 4px;
  border-radius: 2px;
  font-size: 12px;
  line-height: 20px;
  background: #fff;
  border: 1px solid #eff0f1;
  margin-left: 4px;
}

.tag-gray {
  color: #a5abb1;
  border: 1px solid #a5abb1;
}

.tag-red {
  color: #ee4e54;
  border: 1px solid #ee4e54;
}

.tag-blue {
  color: #5d98ef;
  border: 1px solid #5d98ef;
}

smileyby avatar Jul 19 '19 03:07 smileyby

在线demo html：

<section class="demo">
  <p class="item">
    <span class="title">Unicode 只是规定了 Emoji 的码点和含义，并没有规定它的样式。举例来说，码点U+1F600表示一张微笑的脸，但是这张脸长什么样，则由各个系统自己实现。</span>
    <span class="label label-info">IT</span>
    <span class="label label-tip">连载中</span>
    <span class="label label-primary">1123.4万字</span>
  </p>
  <p class="item">
    <span class="title">Emoji 虽然是文字，但是无法书写，必须使用其他方法插入文档。</span>
    <span class="label label-info">emoji</span>
    <span class="label label-tip">已完结</span>
    <span class="label label-primary">12.4万字</span>
  </p>
</section>
<section class="demo">
  <p class="item">
    <span class="title">Unicode 只是规定了 Emoji 的码点和含义，并没有规定它的样式。举例来说，码点U+1F600表示一张微笑的脸，但是这张脸长什么样，则由各个系统自己实现。</span>
    <span class="label label-info">IT</span>
    <span class="label label-tip">连载中</span>
    <span class="label label-primary">1123.4万字</span>
  </p>
  <p class="item">
    <span class="title">Emoji 虽然是文字，但是无法书写，必须使用其他方法插入文档。</span>
    <span class="label label-info">emoji</span>
    <span class="label label-tip">已完结</span>
    <span class="label label-primary">12.4万字</span>
  </p>
</section>

css:

.demo {
  margin: 50px 0;
}
.item {
  display: flex;
}
.title {
  flex: 1;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.label {
  padding: 2px;
  margin: 0 3px;
}
.label-info {
  color: #aaa;
  border: 1px solid #aaa;
}
.label-tip {
  color: #f36;
  border: 1px solid #f36;
}
.label-primary {
  color: #09f;
  border: 1px solid #09f;
}
.demo:nth-of-type(2) .title {
  text-align: left;
  direction: rtl;
}

xxf1996 avatar Jul 19 '19 03:07 xxf1996

在线DEMO

感谢 @XboxYan 提供的浮动在前的思路 兼容IE8... 好吧,读书人的事...


<ul class="list">
  <li class="item"> 
    <div class="item-info"><span data-type="manner">都市</span><span data-type="state">连载中</span><span data-type="lenght">54.82万字</span></div>
    <div class="item-title">这次是一个新的故事这次是一个新的故事这次是一个新的故事</div>
  </li>
  <li class="item"> 
    <div class="item-info"><span data-type="manner">科幻</span><span data-type="lenght">154.82万字</span></div>
    <div class="item-title">这次是一个新的故事这次是一个新的故事</div>
  </li>
  <li class="item"> 
    <div class="item-info"><span data-type="manner">爱情</span><span data-type="state">完结</span><span data-type="lenght">154.82万字</span></div>
    <div class="item-title">这次是一个新的故事这次是一个新的故事这次是一个新的故事</div>
  </li>
  <li class="item" data-layout="right">
    <div class="item-info"><span data-type="manner">科幻</span><span data-type="lenght">4.82万字</span></div>
    <div class="item-title">对应的CSS代码，注意缩进和代码高亮</div>
  </li>
  <li class="item" data-layout="right">
    <div class="item-info"><span data-type="manner">科幻</span><span data-type="state">连载中</span><span data-type="lenght">4.82万字</span></div>
    <div class="item-title">这次是一个新的故事</div>
  </li>
</ul>

.list {
  padding: 0;
  list-style: none;
}

.item {
  margin: 0;
  overflow: hidden;
  line-height: 30px;
}
.item[data-layout="right"] .item-title {
  text-align: left;
  direction: rtl;
}
.item-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  color: #999;
}
.item-info {
  float: right;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item-info span {
  border: 1px solid;
  margin: 0 0 0 2px;
  border-radius: 2px;
  padding: 0 3px;
}
.item-info span[data-type="manner"] {
  color: #999;
}
.item-info span[data-type="state"] {
  color: #e32;
}
.item-info span[data-type="lenght"] {
  color: #32e;
}

这次又学习到了,膜拜

Forx-Js avatar Jul 19 '19 04:07 Forx-Js

demo

<ul class="book-list-wrapper">
  <li class="book-item">
    <div class="book-tag-wrapper">
      <span class="book-tag book-tag-type">都市</span>
      <span class="book-tag book-tag-status">连载中</span>
      <span class="book-tag book-tag-length">54.82万字</span>
    </div>
    <a class="book-title" href="#1">这是一个新的故事这是一个新的故事这是一个新的故事</a>
  </li>
  <li class="book-item">
    <div class="book-tag-wrapper">
      <span class="book-tag book-tag-type">都市</span>
      <span class="book-tag book-tag-status">完本</span>
      <span class="book-tag book-tag-length">1万字</span>
    </div>
    <a class="book-title" href="#2">穿越天地复苏的平行世界穿越天地复苏的平行世界穿越天地复苏的平行世界</a>
  </li>
  <li class="book-item">
    <div class="book-tag-wrapper">
      <span class="book-tag book-tag-type">科幻</span>
      <span class="book-tag book-tag-status">完本</span>
      <span class="book-tag book-tag-length">1059.98万字</span>
    </div>
    <a class="book-title" href="#3">修真四万年</a>
  </li>
</ul>

<hr>

<ul class="book-list-wrapper book-rtl">
  <li class="book-item">
    <div class="book-tag-wrapper">
      <span class="book-tag book-tag-type">都市</span>
      <span class="book-tag book-tag-status">连载中</span>
      <span class="book-tag book-tag-length">54.82万字</span>
    </div>
    <a class="book-title" href="#1">这是一个新的故事这是一个新的故事这是一个新的故事</a>
  </li>
  <li class="book-item">
    <div class="book-tag-wrapper">
      <span class="book-tag book-tag-type">都市</span>
      <span class="book-tag book-tag-status">完本</span>
      <span class="book-tag book-tag-length">1万字</span>
    </div>
    <a class="book-title" href="#2">穿越天地复苏的平行世界穿越天地复苏的平行世界穿越天地复苏的平行世界</a>
  </li>
  <li class="book-item">
    <div class="book-tag-wrapper">
      <span class="book-tag book-tag-type">科幻</span>
      <span class="book-tag book-tag-status">完本</span>
      <span class="book-tag book-tag-length">1059.98万字</span>
    </div>
    <a class="book-title" href="#3">修真四万年</a>
  </li>
</ul>

.book-list-wrapper{
  margin:0;
  padding:0;
  font-family: sans-serif;
}
.book-item{
  line-height:2.5rem;
}
.book-title{
  display:block;
  overflow:hidden;
  color:#8f949d;
  text-decoration:none;
  font-size:1.3rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.book-tag-wrapper{
  float:right;
  margin-left:.6rem;
}
.book-tag{
  font-size:1rem;
  border:1px solid;
  border-radius:0.2rem;
  padding:0.14rem;
}
.book-tag-type{
  color:#8f949d;
}
.book-tag-status{
  color:#ee4d54;
}
.book-tag-length{
  color:#498bed;
}
.book-rtl .book-title{
  direction:rtl;
}

Seasonley avatar Jul 19 '19 04:07 Seasonley

  1. 兼容IE8，两栏自适应布局首选float。在线地址 
ul {
    padding: 0;
    list-style: none;
}

.article-content {
    font-size: 16px;
}

.article-item {
    overflow: hidden;
    height: 2.5em;
    line-height: 2.5em;
}

.article-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1em;
    color: #989da4;
}

.article-label {
    float: right;
}

.article-label > span {
    font-size: .875em;
    border: 1px solid;
    padding: .1em .2em;
    border-radius: .15em;
}

.article-label > span[data-type="type"] {
    color: #abaeb4;
    border-color: #e6e7e8;
}

.article-label > span[data-type="status"] {
    color: #f06266;
    border-color: #fce4e4;
}

.article-label > span[data-type="words"] {
    color: #508fee;
    border-color: #d0e0fa;
}

.article-list[data-type="reverse"] .article-title {
    direction: rtl;
}

<div class="article-content">
    <ul class="article-list">
        <li class="article-item">
            <div class="article-label">
                <span data-type="type">都市</span>
                <span data-type="status">连载中</span>
                <span data-type="words">54.28万字</span>
            </div>
            <div class="article-title">这次是一个新的故事这次是一个新的故事这次是一个新的故事</div>
        </li>
        <li class="article-item">
            <div class="article-label">
                <span data-type="type">都市</span>
                <span data-type="status">完本</span>
                <span data-type="words">1万字</span>
            </div>
            <div class="article-title">修真四万年</div>
        </li>
        <li class="article-item">
            <div class="article-label">
                <span data-type="type">科幻</span>
                <span data-type="status">完本</span>
                <span data-type="words">1059.98万字</span>
            </div>
            <div class="article-title">三体</div>
        </li>
    </ul>
    <ul class="article-list" data-type="reverse">
        <li class="article-item">
            <div class="article-label">
                <span data-type="type">都市</span>
                <span data-type="status">连载中</span>
                <span data-type="words">54.28万字</span>
            </div>
            <div class="article-title">这次是一个新的故事这次是一个新的故事这次是一个新的故事</div>
        </li>
        <li class="article-item">
            <div class="article-label">
                <span data-type="type">都市</span>
                <span data-type="status">完本</span>
                <span data-type="words">1万字</span>
            </div>
            <div class="article-title">修真四万年</div>
        </li>
        <li class="article-item">
            <div class="article-label">
                <span data-type="type">科幻</span>
                <span data-type="status">完本</span>
                <span data-type="words">1059.98万字</span>
            </div>
            <div class="article-title">三体</div>
        </li>
    </ul>
</div>
  1. flex布局，dom结构符合人们理解顺便保持渲染顺序。demo 
ul{
    padding: 0;
    list-style: none;
}
.article-content{
    font-size: 16px;
}
.article-item{
    height: 2.5em;
    line-height: 2.5em;
    display: flex;
}
.article-title{
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1em;
    color: #989da4;
}
.article-label>span{
    font-size: .875em;
    border: 1px solid;
    padding: .1em .2em;
    border-radius: .15em;
}
.article-label>span[data-type="type"]{
    color: #abaeb4;
    border-color: #e6e7e8;
}
.article-label>span[data-type="status"]{
    color: #f06266;
    border-color: #fce4e4;
}
.article-label>span[data-type="words"]{
    color: #508fee;
    border-color: #d0e0fa;
}
.article-list[data-type="reverse"] .article-title{
    direction: rtl;
}

div class="article-content">
    <ul class="article-list">
        <li class="article-item">
            <div class="article-title">这次是一个新的故事这次是一个新的故事这次是一个新的故事</div>
            <div class="article-label">
                <span data-type="type">都市</span>
                <span data-type="status">连载中</span>
                <span data-type="words">54.28万字</span>
            </div>
        </li>
        <li class="article-item">
            <div class="article-title">修真四万年</div>
            <div class="article-label">
                <span data-type="type">都市</span>
                <span data-type="status">完本</span>
                <span data-type="words">1万字</span>
            </div>
        </li>
        <li class="article-item">
            <div class="article-title">三体</div>
            <div class="article-label">
                <span data-type="type">科幻</span>
                <span data-type="status">完本</span>
                <span data-type="words">1059.98万字</span>
            </div>
        </li>
    </ul>
</div>

silverWolf818 avatar Jul 19 '19 04:07 silverWolf818