相关疑难解决方法(0)

我想弄清楚flexbox如何工作(应该工作？...),如下所示:

.holder {
  width: 500px;
  background: lightgray;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.v2 {
  width: 320px;
}
.child {
  display: inline-block;
  border: 1px solid black;
  padding: 30px 0px;
  text-align: center;
}

<div class="holder">
  <div class="child">At a glance</div>
  <div class="child">After coverage ends</div>
  <div class="child">Forms &amp; documents</div>
</div>
<br>
<br>
<div class="holder v2">
  <div class="child">At a glance</div>
  <div class="child">After coverage ends</div>
  <div class="child">Forms &amp; documents</div>
</div>
<br>
<br>
<div class="holder v2">
  <div class="child">At a
    <br>glance</div>
  <div class="child">After coverage …

#tooltip
{ 
    position: absolute;
    width:auto;
    min-width:50px;
    max-width:250px;
    padding:10px;
    background-color:#eee;
    border:1px solid #aaa;
}

基于这种风格,我希望我的工具提示缩小或增长以适应内容,低至50px或高达250px.但是,当内容换行到下一行时,max-width属性似乎超出了我的width属性.当句子末尾的单词很长时,它看起来像留下了一堆填充(见截图),这是一种美学的东西.这是正常的行为吗？

我正在寻找一个HTML/CSS解决方案来解决我们在我们正在构建的网站上遇到的问题.如果需要,我很乐意实现基于JavaScript的解决方案,但我更喜欢它本地处理.

我们有内容管理文本,它需要位于指定区域内,但如果超出可用宽度则换行.文本后面是不透明度的背景颜色.

当文本很短时,由于浮动,容器会折叠到文本的宽度.当文本很长并且发生换行时,容器会以最大宽度挂出,即使里面的文本已经包裹在下面,所以右侧有一小部分背景颜色(这对于我希望容器折叠到前一个单词的边缘,这样它就不会"看起来像"包裹的单词有空间,当它非常接近时.

HTML

<div>
    <p>Crack the Shutters Open Wide for Parkside Paradise</p>
</div>

CSS

body div {
    background-color: #AAFF3B;
    max-width:80%;
    padding:20px;
    display:inline-block;
    float:left;
}
body p {
    display:inline-block;
    background-color: #FFAA3B;
    position: relative;   
    float:left;
    white-space:pre-line;
    clear:left;
}

这是一个JSFiddle:http://jsfiddle.net/nmuot8bm/3/

如果你看第三个例子,你可以在橙色框的右侧看到少量填充,其中字porttitor已经在下面包裹到一个新线但橙色容器仍然处于最大宽度,尽管浮动.如果内容编辑器引入了换行符(例如,根据示例4在前庭和移动器之间),则容器正确地折叠.

我认为正在发生的是容器在文本换行之前增长,浏览器在换行后不会重新计算宽度？

这是我在JSFiddle中显示的测试用例的图片:

下面是暂存站点上的故障图片(在分离到JSFiddle之前):

您可以看到文本已经包装,但容器没有折叠,留下了很大的背景颜色差距.

nb我们可以通过这样做来模仿,text-align:justify但是这些单词之间的间距与网站上其他文本不一致.

编辑:我看到这个问题可能是重复的.我发誓在发布之前我做过研究!

最大宽度调整以适应文本？

线包装上的CSS宽度/最大宽度？

将包含元素的文本强制包装到max-width

将DIV收缩到包裹到其最大宽度的文本？

我认为一般的共识/结论是没有前沿的CSS我不可能使用JavaScript解决方案.

我在我的JSFiddle中添加了一些示例:http://jsfiddle.net/nmuot8bm/6/, 包括此处的JavaScript解决方案:https://stackoverflow.com/a/33246364/647728