Question

标题移动作者下一行的长行

HTML：

    <div class="wrapper">
    <ul class="test">
      <li>
        <span class="title">Comment</span><span class="date">18.09.2017 10:47</span><span class="author">author</span>
        <ul class="test">
          <li><span class="title">Comment</span><span class="date">18.09.2017 10:47</span><span class="author">author</span></li>
          <li><span class="title">Comment very very very very very very very very very very very very very very very long</span><span class="date">18.09.2017 10:47</span><span class="author">author</span>
            <ul class="test">
              <li><span class="title">Comment</span><span class="date">18.09.2017 10:47</span><span class="author">author</span>
            <ul class="test">
              <li><span class="title">Comment</span><span class="date">18.09.2017 10:47</span><span class="author">author</span>
              </li>
            </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><span class="title">Comment</span><span class="date">18.09.2017 10:47</span><span class="author">author</span></li>
      <li><span class="title">Comment</span><span class="date">18.09.2017 10:47</span><span class="author">author</span></li>
      <li><span class="title">Comment</span><span class="date">18.09.2017 10:47</span><span class="author">author</span></li>
    </ul>
  </div>

的CSS：

.wrapper {
  font: 10pt Arial,Tahoma,sans-serif;
  width: 750px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid gray;
}
.odd > li {
  background-color: #f2f2f2;
}
.even > li {
  background-color: white;
}

ul {
  padding-left: 2px;
  margin-right: 0;
  padding-right: 0;
  margin-left: 2px;
  list-style-type: none;
}
li {
  border: 1px solid gray;
  border-right: 0 none;
  margin: 1px;
  margin-right: 0;
  padding: 1px;
  padding-right: 0;
  position: relative;
}
.title {
  position: relative;
  text-align: left;
}
.author {
  position: relative;
  border-left: 1px solid gray;
  text-align: center;
  font-weight: bold;
  width: 110px;
  float: right;
}
.date {
  border-left: 1px solid gray;
  width: 110px;
  height: auto;
  float: right;
}

https://jsfiddle.net/67x5b8v8/1/

Answer 1

您可以在.title元素上设置宽度并设置溢出椭圆，以便在标题末尾显示三个点，如下所示：

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

有关省略号如何工作的详细信息，请参阅css tricks

上的这篇文章

如何在<li>嵌套注释中插入长行？

1 个答案: