Question

我有两个文本块。文本的长度不是恒定的（用户输入）。左侧块中包含短文本，但右侧块可能包含非常长的文本。这些块应该并排出现，并且分布在父母的恒定宽度的100％上，不多也不少。

简化示例：

<div style="white-space: nowrap; font-size: xx-large;">
  <span>woohoo</span>
  <div style="display: inline-block; overflow-wrap: break-word; width: 100%; white-space: normal; vertical-align: top;">gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
  </div>
</div>

此解决方案的问题在于存在水平滚动条，因为右侧块占用其父宽度的100％，但由于两个块的构造宽度应为100％，因此应该减少。

有什么想法吗？

谢谢！

Answer 1

您可以使用flexbox完成此操作，并使用更少的CSS。

.container {
  display: flex;
}

.container div {
  margin-left: .5em;
  word-break: break-word;
}

<div class="container">
  <span>woohoo</span>
  <div>gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
  </div>
</div>

Answer 2

这里使用javascript动态设置宽度;

<html>
    <head>
        <style>
            #container {
                width: 100%;
                box-sizing: border-box;
                font-size: xx-large;
            }
            #left {
                overflow: hidden;
                float: left;
            }
            #right {
                float: right;
                word-break: break-all;
                display: inline-block;
                margin-left: 10px;
            }
        </style>
        <script>
            function setWidth() {
                document.getElementById("left").style.width = document.getElementById('textIsHere').offsetWidth;

                //you should include all margins for #left and #right element
                document.getElementById("right").style.width = document.getElementById('container').offsetWidth - document.getElementById('left').offsetWidth - 10;
            }
        </script>
    </head>
    <body onload="setWidth()">
        <div id="container" onclick="setWidth()">
            <div id="left"><span id="textIsHere">woohoo</span></div>
            <div id="right" >gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
            </div>
        </div>
    </body>
<html>

Answer 3

CSS

.container {
    width: 100%;
    box-sizing: border-box;
    font-size: xx-large;
}
.left {
    width: 150px;
    overflow: hidden;
    float: left;
}
.right {
    width: calc(100% - 150px);
    float: right;
    word-break: break-all;
    display: inline-block;
}

HTML

<div class="container">
    <div class="left">woohoo</div>
    <div class="right">gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
    </div>
</div>

white-space: nowrap;会打破当前结果。为了获得更好的div宽度，您可以使用一些javascript来计算它。

CSS - 内联块并排排列，宽度为100％

3 个答案: