换行时如何使父元素缩小?

Posted

技术标签:

【中文标题】换行时如何使父元素缩小?【英文标题】: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>

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

谢谢

【问题讨论】:

【参考方案1】:

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

li
   width: 33.33%;

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

【讨论】:

我需要容器元素 &lt;li&gt;&lt;/li&gt; 的宽度来匹配其子元素 &lt;a&gt;&lt;/a&gt; 的文本宽度。在我当前的实现中,当文本换行时,&lt;a&gt;&lt;/a&gt; 的宽度会减小,但&lt;li&gt;&lt;/li&gt; 的宽度不会减小【参考方案2】:

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

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>

【讨论】:

以上是关于换行时如何使父元素缩小?的主要内容,如果未能解决你的问题,请参考以下文章

css 如何解决margin-top使父元素margin失效

使父元素扩展以包含相对定位的子元素?

使父元素可点击是不是也会使所有子元素也可点击?

怎样能使父元素随子元素的高度变化而变化(css样式

jQuery - 不可见时获取元素的宽度(显示:无)

弹性盒模型