Question

我在无序列表中有一系列细节，我希望以内联方式显示。我遇到的问题是，对于一个相对较小的区域，一些列表项很长。

这是我附加到我的观点：

"<ul class='details'>" +
  "<li>" + val.Director + "</li>" +
  "<li>" + val.Country + "</li>" +
  "<li>" + val.Year + "</li>" +
  "<li>" + val.Genre + "</li>" +
  "<li>" + val.Runtime + "</li>" +
"</ul>"

这是我的CSS：

.details {
  list-style: none;
  display: inline-block;
}
.details li {
  float: left;
}

.details li:after {
  padding: 10px;
  content: "|";
}

.details li:last-child:after {
  padding: 0;
  content: "";
}

产生以下内容（在iPhone上查看时大约有四行文字）：

JOHN FORD |美国| 1956年| ADVENTURE，DRAMA，WESTERN | 119分

自动换行是不可预测的。以下是提供完整效果的plunker：https://plnkr.co/edit/PkkNOKojOSA8O1oXw50d?p=preview（您会看到有大量的空白区域，受到屏幕宽度的影响）。

我想让这些lis填充它们所包含的div的完整（未指定）宽度，并且仅在右侧包裹到下一行（就好像文本是从左到右写入的一样）单个div）。但是，因为|并且每个列表项之后的填充是演示所必需的，并且没有将我的所有值放入单个span或div并且使用了很多，我想不出怎么做。

任何提示赞赏！谢谢！

Answer 1

从

更改.details li规则

float: left;

到

display: inline;
word-wrap: break-word;

并且li将表现为字符

Updated plnkr

根据评论进行更新

Updated plnkr ver. 2

我会放弃ul / li并使用简单span＆＃39; s并使用此标记

      "<div class='details'>" +
        "<span>" + val.Director + "</span>" +
        "<span>" + val.Country + "</span>" +
        "<span>" + val.Year + "</span>" +
        "<span>" + val.Genre + "</span>" +
        "<span>" + val.Runtime + "</span>" +
      "</div>" +

和这个CSS

.details {
  font-size: 1.4em;
  text-transform: uppercase;
  display: inline-block;
}

.details span {
  word-wrap: break-word;
}

.details span ~ span:before {
  padding: 0 5px;
  content: " | ";
}

内联阻止列表项可以自动换行到新行吗？

1 个答案: