由于某种原因,当水平区域太小而无法显示时,Flex容器内的文本没有正确断开。 但即使处于“正常”状态,它也应该不会破裂?
我在这里做错了什么?
(function () {
var el;
el = document.getElementById('clicker');
el.onclick = function () {
el.classList.toggle('container_changed');
return null;
};
}.call(this));
body {
background: #333;
}
.container {
width: 100px;
position: relative;
}
.container img {
width: 100%;
height: auto;
}
.container .caption {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
vertical-align: middle;
}
.container span {
color: white;
font-family: 'Nobile', sans-serif;
font-size: 1em;
text-align: right;
}
.container_changed {
height: 200px;
width: 200px;
}
.container_changed img {
width: initial;
height: 100%;
}
<div id="clicker" class="container">
<img src="http://www.placebear.com/300/800">
<div class="caption">
<span>Ceci n'est pas un ours</span>
</div>
</div>
答案 0 :(得分:1)
为代码添加一些华丽的调试颜色:
(以防万一)尽管有类名,.container
不是你的灵活容器。它是.caption
。而span是这里唯一的灵活项目。
您可以看到,如果文本较长,它仍会在点击后换行,因为Flex容器宽度为200px,文本占用的数量超过了此值。
如果您是初次使用flexbox,最终的chetsheet位于CSS Tricks。等等,即使不是新的,你仍会发现它很有用:)
(function () {
var el;
el = document.getElementById('clicker');
el.onclick = function () {
el.classList.toggle('container_changed');
return null;
};
}.call(this));
body {
background: #333;
}
.container {
width: 100px;
position: relative;
}
.container img {
width: 100%;
height: auto;
}
.container .caption {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
vertical-align: middle;
background: rgba(106,90,205, 0.7); /*slateblue*/
}
.container span {
color: white;
font-family: 'Nobile', sans-serif;
font-size: 1em;
text-align: right;
background: tomato;
}
.container_changed {
height: 200px;
width: initial;
}
.container_changed img {
width: initial;
height: 100%;
}
<div id="clicker" class="container">
<img src="http://www.placebear.com/300/800">
<div class="caption">
<span>Ceci n'est pas un ours (also click me!)</span>
</div>
</div>
答案 1 :(得分:0)
更改css中.container_changed的宽度:
.container_changed {
height: 200px;
width: 75px;
}