Question

如果您将max-width和display:inline-block;应用于包含文本的div，则div将仅扩展为与文本一样宽，直到文本太宽以至于新行必须开始吧在这一点上，div将采用允许的最大宽度，而不管文本最宽行的宽度是多少。

我的观点在这个小提琴中得到了说明：

<div class="wrapper">
  <div class="item">
    words
  </div>
  <div class="item">
    wordswordswords wordswordswords wordswordswords 
  </div>
  <div class="item">
    words
  </div>
</div>

.wrapper {
  width:200px;
  height:400px;
  background:blue;
}

.item {
  max-width:90%;
  background:green;
  margin:5px 0;
  display:inline-block;
}

有没有办法让div只与最宽的文本行一样宽？

所以不要这样：

|wordswordswords            |
|wordswordswordswords       |
|wordswords                 |

div看起来像这样：

|wordswordswords     |
|wordswordswordswords|
|wordswords          |

Answer 1

Flexbox可以执行equal height columns，并按照此处的要求等宽行。试试这个：

 body {
      display: flex;            /* make .wrapper only as wide as longest content */
 }

.wrapper {
     display: flex;             
     flex-direction: column;    /* stack flex items vertically */
     /* width: 200px; */
     height: 400px;
     /* background: blue; */
}

.item {
    /* max-width: 90%; */
    background: chartreuse;     /* adjusted color; easier to see text */
    margin: 5px 0;
    /* display: inline-block; */
}

注意：

现在所有.item div的宽度都相等。最长的div设置所有的宽度。
为了使此方法有效，您需要删除所有指定的宽度，因为它们会覆盖flex align-items: stretch规则，从而创建等宽行。
如果您希望行的最大宽度为父级的90％，而不是父级的max-width: 90%，请在父级上尝试padding-right: 10%。

DEMO

Answer 2

去显示：flex;在你的包装类中，因为它将确保它们的宽度相同。

.wrapper {
    display: flex;
    flex-direction: column;
}

Answer 3

用于调整内联块大小的算法称为shrink-to-fit或fit-content：



 @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_topic_details, container, false);
        wvTopicDetails = (WebView) view.findViewById(R.id.wv_topic_details);

        wvTopicDetails.setWebChromeClient(new WebViewChromeClient());
        wvTopicDetails.setWebViewClient(new WebViewNormalClient());
        wvTopicDetails.getSettings().setJavaScriptEnabled(true);

        wvTopicDetails.getSettings().setUseWideViewPort(false);
        wvTopicDetails.getSettings().setBuiltInZoomControls(true);
        wvTopicDetails.setScrollbarFadingEnabled(true);

        return view;
    }

 @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        navigationListener.toggleToolbar(true);
        Bundle bundle = getArguments();
        if (bundle != null) {
            topicItem = (TopicItem)    bundle.getSerializable(AppConstants.PARA_NAME_TOPIC_ITEM);            
            wvTopicDetails.loadDataWithBaseURL("", topicItem.getHtmlString(), "text/html", "UTF-8", null);
        }
    }

其中min(max-content, max(min-content, fill-available))是首选大小而不会破坏除明确换行之外的行，并且max-content在所有软换行机会中都会断行。

然后，当min-content时，缩小到合适的宽度为min-content < fill-available < max-content。相反，您希望它是每个行框中内容的最大宽度。

AFAIK，没有办法实现这一目标。原因可能是微小的变化可能会将物品重新排列成不同的线条，并导致容器宽度发生巨大的突变。这可能是不可取的。它也可以产生循环定义，例如：如果孩子的宽度是百分比。

Answer 4

为什么不简单地width:min-content？

＆＃13;

.wrapper {
  width:200px;
  background:gold;
}

.item {
  width:min-content;
  background:green;
  margin:5px 0;
  display:block;
  color:white;
}

＆＃13;

<div class="wrapper">
  <div class="item">
    words
  </div>
  <div class="item">
    wordswordswords word wordswordswordswords 
  </div>
  <div class="item">
    words
  </div>
</div>

＆＃13;

Answer 5

您可以使用display:table或display:inline-table;属性。收缩/扩展以适应内部内容。

.wrapper {
  display: table;
}
.item {
  /*max-width:90%; here ?  it breaks ! */
  background: green;
  margin: 5px 0;
  display: block;
  color: white;
}

<div class="wrapper">
  <div class="item">
    words
  </div>
  <div class="item">
    wordswordswords word wordswordswordswords
  </div>
  <div class="item">
    words
  </div>
</div>
<div class="wrapper">
  <div class="item">
    words
  </div>
  <div class="item">
    wordswordswords word
  </div>
  <div class="item">
    words
  </div>
</div>
<div class="wrapper">
  <div class="item">
    words
  </div>
  <div class="item">
    wordswordswords
  </div>
  <div class="item">
    words
  </div>
</div>

如何将max-width应用于文本div，但是div只能扩展到最大值？

5 个答案: