Question

当子元素文本换行到新行时，如何使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>的宽度

由于

Answer 1

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

li{
   width: 33.33%;
}

然而，听起来你想要的东西比静态的三栏布局更动态，但我不确定你在寻找什么。如果我的上述解决方案没有帮助，您可以更详细地解释一下您正在寻找的内容吗？

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: