换行时如何使父元素缩小？答案

【问题标题】：How to make parent element shrink when line breaks?换行时如何使父元素缩小？
【发布时间】：2015-04-22 11:56:35
【问题描述】：

当子元素文本换行时，如何使 HTML 父元素调整其宽度？我需要使用 javascript 还是可以使用 css 完成？

下面是一个例子。

ul {
  align-items: stretch;
  justify-content: center;
  background: lightgrey;
  display: flex;
  flex-direction: row;
  height: 80px;
  justify-content: flex-start;
  padding-top: 20px;
  padding-bottom: 20px;
}
li {
  background-color: #303E49;
  display: flex;
  list-style: none;
  margin-right: 0.5em;
}
a {
  color: white;
  text-decoration: none;
  margin: 0.5em 0.5em 0.5em 0.5em;
  border: 1px solid white;
}

Resize this window horizontally to see what I am talking about.

<ul>
  <li>
    <a href="#">HowCanIMakeThisBoxShrink
            WhenTheTextBreaksToANewLine?</a>
  </li>
  <li>
    <a href="#">Text</a>
  </li>
  <li>
    <a href="#">Text</a>
  </li>
</ul>

我需要容器元素 <li></li> 的宽度来匹配其子元素 <a></a> 的文本宽度。在我当前的实现中，当文本换行时，<a></a> 的宽度会减小，但<li></li> 的宽度不会减小

谢谢

【问题讨论】：

标签： html css text width

【解决方案1】：

目前，您只有强制打开这些 div 的内容。如果你定义了这些 div 的宽度，你应该得到你想要的效果。像这样的东西会创建一个均匀的三列布局：

li{
   width: 33.33%;
}

但是，听起来您想要一些比静态三列布局更动态的东西，但我不确定您在寻找什么。如果我上面的解决方案没有帮助，您能否更详细地解释您要查找的内容？

【讨论】：

我需要容器元素 <li></li> 的宽度来匹配其子元素 <a></a> 的文本宽度。在我当前的实现中，当文本换行时，<a></a> 的宽度会减小，但<li></li> 的宽度不会减小

【解决方案2】：

我只是尝试在调整大小时用<br> 替换换行符（当跨度高度发生变化时）。它在缩小尺寸时起作用。现在可能在调整大小时将<br> 的替换添加到换行符（也许记得替换完成的宽度）。

var before=$("#shrink a span").height();

$( window ).resize(function() {
  //alert(replaced);
  var elem = $("#shrink a span");
  var now = elem.height();
  var str=elem.html();
  if (now > before) {
    elem.html(str.replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1<br>$2'));
  } 
  //$( "body" ).prepend( "<div>"+before+' '+now+"/div>" );
  before = elem.height(); 
});

ul {
  align-items: stretch;
  justify-content: center;
  background: lightgrey;
  display: flex;
  flex-direction: row;
  height: 80px;
  justify-content: flex-start;
  padding-top: 20px;
  padding-bottom: 20px;
}
li {
  background-color: #303E49;
  display: flex;
  list-style: none;
  margin-right: 0.5em;
}
a {
  color: white;
  text-decoration: none;
  margin: 0.5em 0.5em 0.5em 0.5em;
  border: 1px solid white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Resize this window horizontally to see what I am talking about.

<ul>
  <li id="shrink">
    <a href="#"><span>HowCanIMakeThisBoxShrink
            WhenTheTextBreaksToANewLine?</span></a>
  </li>
  <li>
    <a href="#">Text</a>
  </li>
  <li>
    <a href="#">Text</a>
  </li>
</ul>

【讨论】：