文本没有打破在flexbox里面

问题描述

由于某些原因，当水平面积太小而无法显示时，flex容器内的文本不能正确地分解。
但即使是在正常状态下也应该不会中断？

我在这里做错了什么？

 （function（）{var el; el = document.getElementById（'clicker'）; el.onclick = function（）{el.classList.toggle（'container_changed'）;  

body {background：＃333;}。container {width：100px; position：relative;}。container img {width：100％; height：auto;}。container .caption {position：absolute;顶部：0;正确：0;底部：0;左：0;显示：-webkit-box;显示：-webkit-flex;显示：-ms-flexbox;显示：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;

 < div id = clickerclass =container> < img src =http://www.placebear.com/300/800> < div class =caption> < span>请勿使用我们的< / span> < / div>< / div>  

解决方案

• 你的flex容器是半透明的slateblue背景（兄弟的您的flex项目是包含文本的范围。

$ b $ b

（以防万一）尽管它的类名， .container 不是你的flex容器。它是 .caption 。而span是这里唯一的flex项目。

你可以看到，如果文本更长，它仍然会在点击之后打包，因为flex容器的宽度是200px，文本占用

如果您是flexbox的新手，那么最终的chetsheet就在。等等，即使不是新的，你仍然会觉得它有用：）

body {background：＃333;}。container {width：100px; position：relative;}。container img {width：100％; height：auto;}。container .caption {position：absolute;顶部：0;正确：0;底部：0;左：0;显示：-webkit-box;显示：-webkit-flex;显示：-ms-flexbox;显示：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;背景：rgba（106,90,205,0.7）; /*slateblue*/}.container span {color：white; font-family：'Nobile'，sans-serif; font-size：1em; text-align：right;背景：番茄;}。container_changed {height：200px; width：initial;}。container_changed img {width：initial;

 < div id = clickerclass =container> < img src =http://www.placebear.com/300/800> < div class =caption> < span>无法访问我们的网站（也请点击我！）< / span> < / div>< / div>  

for some reason the text inside a flex container is not breaking correctly when the horizontal area is too small to display.But even in the "normal" state it should then also not break?

what did I do wrong here?

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

解决方案

Adding some flashy debugging colors to your code:

• Your flex container is the translucid slateblue background (sibling of the ours ours image :) )
• Your flex item is the span containing text.

(just in case) Despite its class name, .container isn't your flex container here. It's .caption. And span is the only flex item here.

You can see that if the text is longer, it still wraps after click because the flex container is 200px wide and your text occupies more than that.

If you're new to flexbox, the ultimate chetsheet is on CSS Tricks. Wait, you'll still find it useful even if not new :)

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

这篇关于文本没有打破在flexbox里面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！