换行时如何使父元素缩小?
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>
我需要容器元素 <li></li>
的宽度来匹配其子元素 <a></a>
的文本宽度。在我当前的实现中,当文本换行时,<a></a>
的宽度会减小,但<li></li>
的宽度不会减小
谢谢
【问题讨论】:
【参考方案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>
【讨论】:
以上是关于换行时如何使父元素缩小?的主要内容,如果未能解决你的问题,请参考以下文章