CSS基础测试9 - Githubissues

zhangxinxu / quiz

小测答题收集区

536 stars 43 forks source link

CSS基础测试9 #34

Open zhangxinxu opened 5 years ago

zhangxinxu commented 5 years ago

本期小测题目如下：

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

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

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

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

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

感谢您的参与！

XboxYan commented 5 years ago

方式一：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>

magicds commented 5 years ago

浏览器兼容性： IE10
demo 地址： https://codepen.io/cdswyda/pen/BXBZKE

题目一

兼容 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;
    }
}

ZhangXDong commented 5 years ago

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;
    }

第二题：我没做出来

ghost commented 5 years ago

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;
}

livetune commented 5 years ago

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>

liyongleihf2006 commented 5 years ago

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>

wingmeng commented 5 years ago

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

为了兼容 IE8 下右浮动元素与非浮动元素的对齐，HTML 标签顺序未能与可视效果相一致（界面显示上标题在前，标签在后，而 HTML 代码中标签在前，标题在后）；

第 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;}

GitHdu commented 5 years ago

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;
}

guqianfeng commented 5 years ago

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>

NeilChen4698 commented 5 years ago

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;
}

9lk commented 5 years ago

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; }

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

JaimeCheng commented 5 years ago

【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>

sghweb commented 5 years ago

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;
}

WGHwebitem commented 5 years ago

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>

lifelikejuly commented 5 years ago

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;
}

les-lee commented 5 years ago

在线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>

Despair-lj commented 5 years ago

demo

CSS 样式

```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 格式

```html

都市连载中 54.82万字

这次是一个新的故事这次是一个新的故事这次是一个新的故事
都市完本 1万字

穿越天地复苏的平行世界穿越天地复苏的平行世界穿越天地复苏的平行世界
科幻完本 1059.98万字

修真四万年

都市连载中 54.82万字

这次是一个新的故事这次是一个新的故事这次是一个新的故事
都市完本 1万字

穿越天地复苏的平行世界穿越天地复苏的平行世界穿越天地复苏的平行世界
科幻完本 1059.98万字

修真四万年

```

flyinglove commented 5 years ago

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; }

```html
<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>

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;
}

ylqlalala commented 5 years ago

标题后面点点点：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; }


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

fzpijl commented 5 years ago

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

xuejianrong commented 5 years ago

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>

whrice commented 5 years ago

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>

asyncguo commented 5 years ago

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>

zy017 commented 5 years ago

兼容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>

347235420 commented 5 years ago

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;
    }

smileyby commented 5 years ago

在线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; }

xxf1996 commented 5 years ago

在线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;
}

Forx-Js commented 5 years ago

在线DEMO

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

都市连载中54.82万字

这次是一个新的故事这次是一个新的故事这次是一个新的故事
科幻154.82万字

这次是一个新的故事这次是一个新的故事
爱情完结154.82万字

这次是一个新的故事这次是一个新的故事这次是一个新的故事
科幻4.82万字

对应的CSS代码，注意缩进和代码高亮
科幻连载中4.82万字

这次是一个新的故事

```css
.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;
}

这次又学习到了,膜拜

Seasonley commented 5 years ago

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;
}

silverWolf818 commented 5 years ago

兼容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>

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>

zengqingxiao commented 5 years ago

demo用的flex布局完成的 CSS

 <style>
    ul {
      list-style: none;
      padding: 0;
    }
    p {
      margin: 0;
    }

    .title {
      color: #959AA2;
      font-size: 20px;
    }

    .title>.title-line {
      display: flex;
      margin-bottom: 10px;
    }

    .title>.title-line>.title-line-text {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      /* direction: rtl; */
      flex: 1 1 auto;
      margin-right: 10px;
    }
    .title .label {
      display: flex;
      flex: 1 0 auto;
      justify-content: flex-end;
    }
    .title .label>li {
      display: flex;
      align-items: center;
      margin-right: 5px;
      padding: 0 5px;
      border-radius: 3px;
      line-height: 1;
      font-size: 16px;
    }

    .title .label>li:last-child {
      margin-right: 0;
    }

    .title .label>li.theme {
      color: #959AA2;
      border: 1px solid #959AA2;
    }

    .title .label>li.state {
      color: #F06066;
      border: 1px solid #F06066;
    }

    .title .label>li.quantity {
      color: #4D8DEE;
      border: 1PX solid #4D8DEE;
    }
  </style>

HTML

<body>
  <ul class="title">
    <li class="title-line">
      <p class="title-line-text">
        大家好我是一段很长的文字,大家好我是一段很长的文字,大家好我是一段很长的文字,大家好我是一段很长的文字,大家好我是一段很长的文字,大家好我是一段很长的文字,大家好我是一段很长的文字</p>
      <ul class="label">
        <li class="theme">都市</li>
        <li class="state">连载中</li>
        <li class="quantity">54.82万字</li>
      </ul>
    </li>
    <li class="title-line">
      <p class="title-line-text">大家好我是一段中等长的文字,大家好我是一段中等长的文字,大家好我是一段中等长的文字大家好我是一段中等长的文字</p>
      <ul class="label">
        <li class="theme">都市</li>
        <li class="state">连载中</li>
        <li class="quantity">54.82万字</li>
      </ul>
    </li>
    <li class="title-line">
      <p class="title-line-text">大家好我是一段短文,大家好我是一段短文,大家好我是一段短文,大家好我是一段短文</p>
      <ul class="label">
        <li class="theme">都市</li>
        <li class="state">连载中</li>
        <li class="quantity">54.82万字</li>
      </ul>
    </li>
  </ul>
</body>

兼容 IE8 float 写法 demo HTML

<body>
  <ul class="title">
    <li class="title-line">
      <ul class="label">
        <li class="theme">都市</li>
        <li class="state">连载中</li>
        <li class="quantity">54.82万字</li>
      </ul>
      <p class="title-line-text">
        大家好我是一段很长的文字,大家好我是一段很长的文字,大家好我是一段很长的文字,大家好我是一段很长的文字,大家好我是一段很长的文字,大家好我是一段很长的文字,大家好我是一段很长的文字1111</p>
    </li>
    <li class="title-line">
      <ul class="label">
        <li class="theme">都市</li>
        <li class="state">连载中</li>
        <li class="quantity">54.82万字</li>
      </ul>
      <p class="title-line-text">
        大家好我是一段很长的文字,大家好我是一段很长的文</p>
    </li>
    <li class="title-line">
      <ul class="label">
        <li class="theme">都市</li>
        <li class="state">连载中</li>
        <li class="quantity">54.82万字</li>
      </ul>
      <p class="title-line-text">
        大家好我是一段很长的文字</p>
    </li>
  </ul>
</body>

CSS

 <style>
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    p {
      margin: 0;
    }

    .title>.title-line {
      margin-bottom: 10px;
    }

    .title>.title-line>.title-line-text {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      /* display: table-cell; *display: inline-block; width: 2000px; *width: auto; */
    }
    .title .label{
      float: right;
    }
    .title .label>li {
      box-sizing: border-box;
      display: inline-block;
      margin-right: 5px;
      border-radius: 3px;
    }

    .title .label>li:last-child {
      margin-right: 0;
    }

    .title .label>li.theme {
      color: #959AA2;
      border: 1px solid #959AA2;
    }

    .title .label>li.state {
      color: #F06066;
      border: 1px solid #F06066;
    }

    .title .label>li.quantity {
      color: #4D8DEE;
      border: 1px solid #4D8DEE;
    }
  </style>

第二问demo 在 / direction: rtl; /吧这个注释打开就可以了

liuyueji commented 5 years ago

都忘光了啊。。

感谢 @XboxYan demo css

html

都市 连载中 54.21万字

这是文字这是文字这是文字这是文字这是文字

都市 连载中 54.21万字

这是文字这是文字这是文字这是文字这是文字

tzmy commented 5 years ago

demo

.box{
    display: flex;
}
.title{
    font-size: 26px;
    height: 32px;
    line-height: 32px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    vertical-align: middle;
    flex: 1;
}

.tag-box{
    height: 32px;
    line-height: 32px;
    vertical-align: middle;
}

.tag{
    display: inline-block;
    border: 1px solid #2c94e9;
    color: #2c94e9;

    height: 32px;
    line-height: 32px;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 16px;
    padding: 0 2px;

}

.new-box{
    margin-top: 10px;
    display: flex;
}
.new-title{
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 26px;
    height: 32px;
    line-height: 32px;
    text-align: left;
    direction: rtl;
}
.new-tag-box{
    font-size: 16px;
    height: 32px;
    line-height: 32px;
}
.new-tag{
    display: inline-block;
    border: 1px solid #2c94e9;
    color: #2c94e9;
    box-sizing: border-box;
    border-radius: 5px;
    padding: 0 2px;
}

<div class = 'box'>
    <div class="title">这次是一个新的故事这次是一个新的故事这次是一个新的故事</div>
    <div class="tag-box">
        <div class='tag'>连载</div>
        <div class='tag'>连载</div>
        <div class='tag'>连载</div>
        <div class='tag'>连载</div>
    </div>
</div>

<div class = 'new-box'>
    <div class="new-title">这次是一个新的故事这次是一个新的故事这次是一个新的故事</div>
    <div class="new-tag-box">
        <div class='new-tag'>连载</div>
        <div class='new-tag'>连载</div>
        <div class='new-tag'>连载</div>
        <div class='new-tag'>连载</div>
    </div>
</div>

EmmaYXY commented 5 years ago

兼容： IE10 效果：实现了右边三个点；宽度自适应 demo: CSS基础测试9 HTML:

  <div class="long size">
    <p class="content">这次是一个新的故事你猜是啥故事我也不知道是啥故事只知它是个故事不是别的不是诗歌虽说诗歌也可以是故事但在这里它就是个用大白话写成了叙事小说类型的故事哈</p>
    <div class="tags">
      <span class="type">都市</span>
      <span class="status">连载中</span>
      <span class="count">54.82万字</span>
    </div>
  </div>
  <div class="middle size">
    <p class="content">穿越天地复苏的平行世界，偶获诸天聊天群</p>
    <div class="tags">
      <span class="type">都市</span>
      <span class="status">完本</span>
      <span class="count">一万字</span>
    </div>
  </div>
  <div class="short size">
    <p class="content">修真四千年</p>
    <div class="tags">
      <span class="type">科幻</span>
      <span class="status">完本</span>
      <span class="count">1098.82万字</span>
    </div>
  </div>
</main>

CSS:


  margin: 0;
}
.size {
  display: flex;
  justify-content: space-between;
}
.content {
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
  color: #9a9ea6;
}
.tags {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
}
.tags span {
  display: inline-block;
  padding: 2px;
  margin-left: 4px;
  border-radius: 2px;
  border: 1px solid;
  white-space: nowrap;
  font-size: 13px;
}
.tags .type {
  border-color: #dddddd;
  color: #9a9ea6;
}
.tags .status {
  border-color: #fac4c5;
  color: #f05c62;
}
.tags .count {
  border-color: #cbdcfa;
  color: #5361ef;
}

juzhiqiang commented 5 years ago

demo `

<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        font-size: 14px;
        color: #999;
    }

    ul {
        list-style: none;
    }

    ul li {
        margin: 10px 0;
        height: 22px;
    }

    .text {
        overflow: hidden;
        word-break: break-all;
        white-space: nowrap;
        text-overflow: ellipsis;
        /* 必须是块状 */
        display: block;
    }

    .badge {
        border: 1px solid #ccc;
        border-radius: 4px;
        margin: 0 4px;
        padding: 2px 4px;
        display: inline-block;
    }

    .badge-group {
        float: right;
    }

    .text-direction{
        direction: rtl;
    }
</style>

`

    <li>
        <div class="badge-group">
            <label class="badge">徽章</label>
            <label class="badge">徽章</label>
            <label class="badge">徽章</label>
        </div>
        <span class="text">本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。</span>
    </li>
    <li>
        <div class="badge-group">
            <label class="badge">徽章</label>
            <label class="badge">徽章</label>
            <label class="badge">徽章</label>
            <label class="badge">徽章</label>
        </div>
        <span class="text text-direction">入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack会找出有哪些模块和库是入口起点（直接和间接）依赖的。</span>
    </li>

</ul>`

kuikuiGe commented 5 years ago

demo

<div class="panel">
        <h2 class="panel-name">后面出现点</h2>
        <div class="panel-con">
            <div class="story">
                <div class="story-name">这次是一个新的故事后面要出现点点点了后面要出现点点点了后面要出现点点点了</div>
                <div class="story-lbs">
                    <span class="story-lb" color-gray>都市</span>
                    <span class="story-lb" color-red>连载中</span>
                    <span class="story-lb" color-blue>54.82万字</span>
                </div>
            </div>
            <div class="story">
                <div class="story-name">穿越天地复苏的平行世界，后面要出现点点点了后面要出现点点点了后面要出现点点点了</div>
                <div class="story-lbs">
                    <span class="story-lb" color-gray>都市</span>
                    <span class="story-lb" color-red>完本</span>
                    <span class="story-lb" color-blue>1万字</span>
                </div>
            </div>
            <div class="story">
                <div class="story-name">修真四万年</div>
                <div class="story-lbs">
                    <span class="story-lb" color-gray>科幻</span>
                    <span class="story-lb" color-red>完本</span>
                    <span class="story-lb" color-blue>1059.8万字</span>
                </div>
            </div>
        </div>
    </div>
    <div class="panel">
        <h2 class="panel-name">前面出现点</h2>
        <div class="panel-con">
            <div class="story">
                <div class="story-name" reverse-ellipsis>前面要出现点点点点了。浩劫余生，终见光明</div>
                <div class="story-lbs">
                    <span class="story-lb" color-gray>都市</span>
                    <span class="story-lb" color-red>连载中</span>
                    <span class="story-lb" color-blue>54.82万字</span>
                </div>
            </div>
            <div class="story">
                <div class="story-name" reverse-ellipsis>前面要出现点了平行世界，偶获诸天聊天群</div>
                <div class="story-lbs">
                    <span class="story-lb" color-gray>都市</span>
                    <span class="story-lb" color-red>完本</span>
                    <span class="story-lb" color-blue>1万字</span>
                </div>
            </div>
            <div class="story">
                <div class="story-name" reverse-ellipsis>修真四万年</div>
                <div class="story-lbs">
                    <span class="story-lb" color-gray>科幻</span>
                    <span class="story-lb" color-red>完本</span>
                    <span class="story-lb" color-blue>1059.8万字</span>
                </div>
            </div>
        </div>
    </div>

body {
  padding: 0 12px;
}

/* zxx: 看到了最高分的希望，可惜最终实现还是棋差一招 */
.story {
  display: table;
  width: 100%;
  table-layout: fixed;
  margin-bottom: 16px;
  color: #a3a6ac;
}

.story-name,
.story-lbs {
  display: table-cell;
}

.story-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  font-weight: bold;
}

.story-name[reverse-ellipsis] {
  text-align: left;
  direction: rtl;
}

.story-lbs {
  text-align: right;
}

.story-lb {
  display: inline-block;
  padding: 2px;
  font-size: 14px;
  font-weight: bold;
  border: 1px solid;
}

.story-lb[color-gray] {
  color: #a3a6ac;
}

.story-lb[color-red] {
  color: #f16567;
}

.story-lb[color-blue] {
  color: #639cf3;
}

zzzluyan commented 5 years ago

demo 地址 https://codepen.io/zzzluyan/pen/eqmBmj

.one-line {
    display: flex;
    justify-content: space-between;
    width: 350px;
    margin: 15px auto;
}
.title {
    color: #ABAFB4;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.title-re {
    color: #ABAFB4;
    overflow-x: hidden;
    text-overflow: ellipsis;
    direction: rtl;
    white-space: nowrap;
}
.label {
    margin-left: 15px;
    flex-shrink: 0;
    flex-wrap: nowrap;
}
.label-item {
    padding: 3px;
    border-radius: 3px;
}
.label-item:nth-child(3n+1){
    border: 1px solid #ABAFB4;
    color: #ABAFB4;
}
.label-item:nth-child(3n+2) {
    border: 1px solid #EE4E54;
    color: #EE4E54;
}
.label-item:nth-child(3n+3) {
    border: 1px solid #6399F0;
    color: #6399F0;
}

<div class="container">
    <div class="one-line">
        <div class="title">xxxxx今夜夜色很美xxxxxx</div>
        <div class="label">
            <span class="label-item">都市</span>
            <span class="label-item">连载中</span>
            <span class="label-item">xxx.xxx万字</span>
        </div>
    </div>
    <div class="one-line">
        <div class="title">射雕英雄传</div>
        <div class="label">
            <span class="label-item">武侠</span>
            <span class="label-item">已完结</span>
            <span class="label-item">500万字</span>
        </div>
    </div>
    <div class="one-line">
        <div class="title">这可能是个很长的标题，长到多长，我也不清楚</div>
        <div class="label">
            <span class="label-item">未知</span>
            <span class="label-item">连载中</span>
            <span class="label-item">1024.01万字</span>
        </div>
    </div>
</div>
<hr>
<div class="container">
    <div class="one-line">
        <div class="title-re">xxxxx今夜夜色很美xxxxxx</div>
        <div class="label">
            <span class="label-item">都市</span>
            <span class="label-item">连载中</span>
            <span class="label-item">xxx.xxx万字</span>
        </div>
    </div>
    <div class="one-line">
        <div class="title-re">射雕英雄传</div>
        <div class="label">
            <span class="label-item">武侠</span>
            <span class="label-item">已完结</span>
            <span class="label-item">500万字</span>
        </div>
    </div>
    <div class="one-line">
        <div class="title-re">这可能是个很长的标题，长到多长，我也不清楚</div>
        <div class="label">
            <span class="label-item">未知</span>
            <span class="label-item">连载中</span>
            <span class="label-item">1024.01万字</span>
        </div>
    </div>
</div>

wang-baojin commented 5 years ago

在线demo

ul li{
  list-style:none;
  line-height:40px;
  color:#b2b5b9;
}
.title{
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.tag_list{
  float:right;
  font-size:14px;
}
.tag_item{
  border:1px solid;
  border-radius:4px;
  padding:2px;
/*   font-size:14px; *///
}
.tag_item.type{
  color:#b2b5b9;
}
.tag_item.status{
  color:#ee4e54;
}
.tag_item.number{
  color:#71a6f2;
}
.list_2 .title{
  direction: rtl;
  text-align:left;
}

<ul class="list_1">
  <li>
    <div class="tag_list">
      <span class="tag_item type">都市</span>
      <span class="tag_item status">连载中</span>
      <span class="tag_item number">54.82万字</span>
    </div>
    <div class="title">这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题</div>
  </li>
  <li>
    <div class="tag_list">
      <span class="tag_item type">都市</span>
      <span class="tag_item status">完本</span>    
      <span class="tag_item number">1万字</span>
    </div>
    <div class="title">这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题</div>
  </li>
  <li>
    <div class="tag_list">
      <span class="tag_item type">科幻</span>
      <span class="tag_item status">完本</span>
      <span class="tag_item number">1059.98万字</span>
    </div>
    <div class="title">这是个长度不定的标题</div>
  </li>
</ul>
<ul class="list_2">
  <li>
    <div class="tag_list">
      <span class="tag_item type">都市</span>
      <span class="tag_item status">连载中</span>
      <span class="tag_item number">54.82万字</span>
    </div>
    <div class="title">这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题</div>
  </li>
  <li>
    <div class="tag_list">
      <span class="tag_item type">都市</span>
      <span class="tag_item status">完本</span>    
      <span class="tag_item number">1万字</span>
    </div>
    <div class="title">这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题</div>
  </li>
  <li>
    <div class="tag_list">
      <span class="tag_item type">科幻</span>
      <span class="tag_item status">完本</span>
      <span class="tag_item number">1059.98万字</span>
    </div>
    <div class="title">这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题这是个长度不定的标题</div>
  </li>
</ul>

编写过程中遇见个的问题，.tag_list的字体大小大于 .tag_item的字体大小样式会变为下图 error

heightzhang commented 5 years ago

目前只能做第一题，后面的暂时做不出来，会努力学习跟上。

浏览器兼容性： IE10
demo 地址： https://codepen.io/heightzhang/pen/bXNqmw

题目一

<body>
  <div>
    <div class="li">
      <div class="title single-ellipsis">这次是一个新的故事</div>
      <div class="tab">
        <div>都市</div>
        <div>连载中</div>
        <div>54.82万字</div>
      </div>
    </div>
  </div>
</body>

<style>
.li{
  display: flex;
 }
.title{
  color: #cccccc;
  font-size: 24px;
  width: 200px;
}
.tab{
  display: flex;
  align-items: center;
}
.tab > div{
  color: blue;
  border: 1px solid #cccccc;
  line-height: 12px;
  font-size: 12px;
  padding: 4px;
  margin-right: 2px;
}
.tab > div:last-child{
  margin-right: 0;
} 
 /* 单行省略 */
.single-ellipsis{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
</style>

ziven27 commented 5 years ago

CodePen

h3, p {
  margin: 0;
}

/* 清除浮动 */
.clearfix:after {
  display: table;
  content: '';
  clear: both;
}

/* 单行文字点点点 */
.ell {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* 单行文字点点点前置 */
.ell._reverse {
  direction: rtl;
  text-align: left;
}

.fr {
  float: right;
}

.mld5em {
  margin-left: 0.5em;
}

.mbd5em {
  margin-bottom: 0.5em;
}

/* 徽章 */
.badge {
  display: inline-block;
  border: 1px solid;
  border-radius: 0.2em;
  color: gray;
  font-size: 0.8em;
  padding: 0 0.5em;
  vertical-align: -25%;
  white-space: nowrap;
  overflow: hidden;
}

.badge[title] {
  max-width: 10em;
  text-overflow: ellipsis;
}

.badge._primary {
  color: blue;
}

.badge._danger {
  color: red;
}

.badge-group {
  white-space: nowrap;
}

/* title-barn */
.title-bar {
  line-height: 1.5;
  color: gray;
}

.title-text {
  font-size: 1em;
  font-weight: 400;
}

.demo-box {
  font-size: 16px;
  max-width: 24em;
}

<div class="demo-box">
    <h2>第一题</h2>
    <div class="title-bar clearfix mbd5em">
        <p class="fr mld5em badge-group">
            <small class="badge">都市</small>
            <small class="badge _danger">连载中</small>
            <small title="54.82万字54.82万字54.82万字54.82万字" class="badge _primary">54.82万字54.82万字54.82万字54.82万字</small>
        </p>
        <h3 class="title-text ell">这是一个新的故事很长很长</h3>
    </div>
    <div class="title-bar clearfix mbd5em">
        <p class="fr mld5em badge-group">
            <small class="badge">都市</small>
            <small class="badge _danger">连载中</small>
            <small title="54.82万字" class="badge _primary">1万年</small>
        </p>
        <h3 class="title-text ell">这是一个新的故事很长很长的故事长的故事长的故事长的故事长的故事长的故事长的故事长的故事长的故事长的故事</h3>
    </div>
    <div class="title-bar clearfix mbd5em">
        <p class="fr mld5em badge-group">
            <small class="badge">都市</small>
            <small class="badge _danger">连载中</small>
            <small class="badge _primary">1059.98万字</small>
        </p>
        <h3 class="title-text ell">修真四万年</h3>
    </div>

    <h2>第二题</h2>
    <div class="title-bar clearfix mbd5em">
        <p class="fr mld5em badge-group">
            <small class="badge">都市</small>
            <small class="badge _danger">连载中</small>
            <small title="54.82万字54.82万字54.82万字54.82万字" class="badge _primary">54.82万字54.82万字54.82万字54.82万字</small>
        </p>
        <h3 class="title-text ell _reverse">这是一个新的故事很长很长再见我的爱如何去表达我的爱</h3>
    </div>
    <div class="title-bar clearfix mbd5em">
        <p class="fr mld5em badge-group">
            <small class="badge">都市</small>
            <small class="badge _danger">连载中</small>
            <small title="54.82万字" class="badge _primary">1万年</small>
        </p>
        <h3 class="title-text ell _reverse">这是一个新的故事很长很长再见我的爱如何去表达我的爱</h3>
    </div>
    <div class="title-bar clearfix mbd5em">
        <p class="fr mld5em badge-group">
            <small class="badge">都市</small>
            <small class="badge _danger">连载中</small>
            <small class="badge _primary">1059.98万字</small>
        </p>
        <h3 class="title-text ell _reverse">修真四万年</h3>
    </div>
</div>

frankyeyq commented 5 years ago

demo

<ul class="main">
    <li>
        <div class="tags">
            <span class="tag category">都市</span>
            <span class="tag status">连载中</span>
            <span class="tag count">54.82万字</span>
        </div>
        <div class="title">
            <div class="text">这次是一个新的故事后面都是省略号这次是一个新的故事后面都是省略号这次是一个新的故事后面都是省略号这次是一个新的故事后面都是省略号这次是一个新的故事后面都是省略号这次是一个新的故事后面都是省略号这次是一个新的故事后面都是省略号这次是一个新的故事后面都是省略号</div>
        </div>
    </li>
    <li>
        <div class="tags">
            <span class="tag category">都市</span>
            <span class="tag status">连载中</span>
            <span class="tag count">54.82万字</span>
        </div>
        <div class="title">
            <div class="text rtl">这次是一个新的故事后面都是省略号这次是一个新的故事后面都是省略号这次是一个新的故事后面都是省略号这次是一个新的故事后面都是省略号这次是一个新的故事后面都是省略号这次是一个新的故事后面都是省略号这次是一个新的故事后面都是省略号这次是一个新的故事后面都是省略号</div>
        </div>
    </li>
  <li>
        <div class="tags">
            <span class="tag category">都市</span>
            <span class="tag status">连载中</span>
            <span class="tag count">54.82万字</span>
        </div>
        <div class="title">
            <div class="text rtl">这次是一个新的故事后面都是省略号</div>
        </div>
    </li>
</ul>

ul {
    padding: 0;
}
p {
    margin: 0;
}
.main li{
    line-height: 30px;
    margin-bottom: 10px;
}
.title {
    overflow: hidden;
}
.text {
    color: #9da2a9;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size: 30px;
}
.text.rtl {
    direction: rtl;
}
.tags {
    float: right;
    font-size: 0;
    line-height: 30px;
}
.tag {
    border: 1px solid;
    border-radius: 2px;
    padding: 1px;
    font-size: 12px;
    line-height: 18px;
    display: inline-block;
    vertical-align: middle;
}
.tag.category {
    color: #9da2a9;
}
.tag.status {
    color: #ef565c;
}
.tag.count {
    color: #6a9ef0;
}
.tag + .tag {
    margin-left: 5px;
}

GCGligoudan commented 5 years ago

第一题：demo

  <div class="content">
    <div class="header">
      <div class="title">
        这次是一个新的故事一个新的故事一个新的故事
      </div>
      <div class="tag">
        <span class="type">都市</span>
        <span class="status">连载中</span>
        <span class="length">54.82万字</span>
      </div>
    </div>
    <div class="header">
      <div class="title">
        穿越天地复苏的平行世界复苏的平行世界复苏
      </div>
      <div class="tag">
        <span class="type">都市</span>
        <span class="status">完本</span>
        <span class="length">1万字</span>
      </div>
    </div>
    <div class="header">
      <div class="title">
        修真四万年
      </div>
      <div class="tag">
        <span class="type">科幻</span>
        <span class="status">完本</span>
        <span class="length">1059.98万字</span>
      </div>
    </div>
  </div>

    *{
      margin: 0;
    }
    .header{
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
    }
    .title{
      flex-grow: 1;
      width: 100%;
      font-size: 16px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .tag{
      white-space: nowrap;
    }
    span{
      font-size: 14px;
      border: 1px solid #999;
      border-radius: 4px;
      padding:0 2px;
    }
    span.type{
      border-color: #999;
      color: #999;
    }
    span.status{
      border-color: crimson;
      color: crimson;
    }
    span.length{
      border-color: blue;
      color: blue;
    }

第二题将上面title的css新增两行即可

    .title{
      flex-grow: 1;
      font-size: 16px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      /* 左侧省略 */
      direction: rtl;
      text-align: left;
    }

jsweber commented 5 years ago

flex布局，不兼容IE8 在线demo

  <div class="book-msg">
    <p class="book-abs">这次是一个新的故事这次是新的故事这次是一个新的故事这次是新的故事这次是一个新的故事这次是新的故事</p>
     <span class="tag-wrapper">
       <span data-tag-category>都市</span>
       <span data-tag-status>连载中</span>
       <span data-tag-size>54.82万字</span>
    </span>
  </div>

  <div class="book-msg">
    <p class="book-abs">这次是一个新的故事这次是新的故事</p>
     <span class="tag-wrapper">
       <span data-tag-category>都市</span>
       <span data-tag-status>连载中</span>
       <span data-tag-size>54.82万字</span>
    </span>
  </div>

  <div class="book-msg">
    <p class="book-abs" data-reverse>这次是一个新的故事这次是新的故事这次是一个新的故事这次是新的故事这次是一个新的故事这次是新的故事</p>
     <span class="tag-wrapper">
       <span data-tag-category>都市</span>
       <span data-tag-status>连载中</span>
       <span data-tag-size>54.82万字</span>
    </span>
  </div>

.book-msg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  font-weight: bold;
}

.book-abs {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #aeafaf;
}

.tag-wrapper{
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  flex-shrink: 0;
}

[data-tag-category], [data-tag-status], [data-tag-size] {
  display: inline-block;
  padding: 2px 5px;
  font-size: 13px;
}

[data-tag-category]{
  color: #aeafaf;
  border: 1px solid #aeafaf;
}

[data-tag-status]{
  color: #ee4e54;
  border: 1px solid #ee4e54;
}

[data-tag-size]{
  color: #669ef7;
  border: 1px solid #669ef7;
}

[data-reverse] {
  direction: rtl;
  text-align: left;
}

zhangxinxu commented 5 years ago

本期要点：

大家布局其实这3类：float+overflow，然后是flex布局，很少人使用的table布局。
float布局技巧：float:right+overflow:hidden;text-overflow:ellipsis;white-space:nowrap; 原理：overflow:hidden可以创建格式化上下文，也就是BFC，类似结界，不受浮动影响，自动分配剩余空间。
flex布局：display:flex > flex: 1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
重点是table布局：float布局有个非常明显的不足，那就是DOM的位置和视觉是不一致的。XboxYan 的table布局虽然效果有，但是却有很多的不足。1. 左侧table-cell的尺寸不建议使用字符撑开，然后内容绝对定位打点布局有较大的限制。非table-layout:fixed的表格，其每个单元格尺寸宽度是根据里面内容自动分配的，如果你没有设置white-space: nowrap是自动宽度自适应的。但是设置了white-space: nowrap则尺寸表现就不符合要求，怎么办呢？其实很简单，再嵌套一层display:table;table-layout:fixed;的元素。table布局中，打点只能在table-layout:fixed的场景下。所以，我们设置很大宽度的table-cell的子元素display:table;table-layout:fixed;此时就能正常打点了。优点：兼容性更好，DOM顺序符合认知。
开头打点direction: rtl就可以。

tensozangeci commented 5 years ago

比较好奇如果是这样的多行的文字省略效果还能用css实现吗？我自己的思考是多行省略会用到如下的css:

 .multi-line-ellipsis {
      display: -webkit-box;
      overflow: hidden;
      word-break: break-all;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
 }

这里的webkitbox是一个块状盒子。这样想来似乎无法通过css实现如图所示的效果。