相关疑难解决方法(0)

#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属性.当句子末尾的单词很长时,它看起来像留下了一堆填充(见截图),这是一种美学的东西.这是正常的行为吗？

我正在尝试使用收缩来适应#container。它可以完美地工作，直到它包含的元素换行为止。这会使其扩展到 180 像素。

#screen-dimensions 
{
  width: 250px;
  height: 100px;
  background-color: yellow;
}

#container
{
  display: table;
  background-color: pink;
  border: 5px solid red;
}

#container > div
{
  display: inline-block;
  width: 160px;
  background-color: lightblue;
  border: 5px solid blue;
}

<div id="screen-dimensions">
  <div id="container">
    <div>content</div>
    <div>content</div>
  </div>
</div>

我明白为什么会出现这种行为，但我无法找到任何解决方法。

这可以解决吗？

我想制作一个继承其子宽度的 div。

当子级只有一行时它可以工作，但是当它变成多行时，父级将获得 max-width 属性的宽度。

HTML：

<div class="message-content">
    <span>Lorem ipsumdolor ipsum dolorsit ametipsumdolor ipsum dolor sit amet ipsumdolor ipsum dolor sit amet</span>
</div>

社会保障体系：

.message-content {
    max-width: 450px;
    background: green;
    padding: 15px;
    border-radius: 3px;
    display: inline-block;
    span {
       background:red;
    }
}

Jsfiddle： https: //jsfiddle.net/q0axyfp3/

预期结果：

编辑 这是我想要实现的目标的比较（当然以响应式且优雅的方式）： https: //jsfiddle.net/q0axyfp3/5/

有谁知道如何修理它？

非常感谢