html – 当文本包装成多行时CSS收缩宽度

概述我正在构建一个列表小部件,其中有多个< li>内有两个兄弟元素. 一个< span>标题和< div>为了底线.该线必须根据其相邻跨度元素的宽度而变化. .limit-area { width: 250px; height: 350px; background-color: #96ceb4;}.limit-area ul { font-size: 0; list-style 我正在构建一个列表小部件,其中有多个< li>内有两个兄弟元素.

一个< span>标题和< div>为了底线.该线必须根据其相邻跨度元素的宽度而变化.

.limit-area {  wIDth: 250px;  height: 350px;  background-color: #96ceb4;}.limit-area ul {  Font-size: 0;  List-style-type: none;  -webkit-padding-start: 0;}.limit-area ul li {  background-color: #ffeead;  display: table;  margin-bottom: 20px;}.limit-area ul li .wrapper span {  Font-size: 24px;  color: #010101;}.limit-area ul li .wrapper .line {  height: 6px;  margin-top: 12px;  background-color: #ff6f69;}

<div >  <ul>    <li>      <div >        <span>One line only</span>        <div ></div>      </div>    </li>    <li>      <div >        <span>Bigger one line only </span>        <div ></div>      </div>    </li>    <li>      <div >      <span>Long line and go crazyyyyyy</span>      <div ></div>    </div>  </li>  </ul></div>

关于Jsfiddle的完整示例：https://jsfiddle.net/arnauth/55josw6e/

在上面的示例中,我可以轻松地完成前两个列表项目的目标.

这里的诀窍是当我有一条长行分成两行或更多行时 – 具有相同的效果 – 示例中的第三行.

line元素必须具有相同的文本宽度,因此在示例中必须在单词’go’附近停止 – 而不是在显示的容器的末尾.

我的想法是尝试仅使用CSS规则来避免基于JavaScript的代码来解决问题.

感谢您的关注.

解决方法@H_403_32@ 我添加了宽度：200px;到.wrapper类.尝试以下CSS代码：

.limit-area {  wIDth: 250px;  height: 350px;  background-color: #96ceb4;}  ul {Font-size: 0;List-style-type: none;-webkit-padding-start: 0;}li {  background-color: #ffeead;  display: table;  margin-bottom: 20px;}.wrapper {  wIDth:200px;}span {  Font-size: 24px;  color: #010101;}.line {  height: 6px;  margin-top: 12px;  background-color: #ff6f69;}

<div >  <ul>    <li>      <div >        <span>One line only</span>        <div ></div>      </div>    </li>    <li>      <div >        <span>Bigger one line only </span>        <div ></div>      </div>    </li>    <li>      <div >      <span>Long line and go crazyyyyyy</span>      <div ></div>    </div>  </li>  </ul></div>

总结

以上是内存溢出为你收集整理的html – 当文本包装成多行时CSS收缩宽度全部内容，希望文章能够帮你解决html – 当文本包装成多行时CSS收缩宽度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。