Question

我有2个div对齐（treebold和totor），第二个div可能有很长的字符串，我不希望所有文本都放在第二行。我在互联网上搜索了没有成功的答案。你有什么解决办法吗？

.treebold {
  word-wrap: break-word;
  display: inline-block;
}

.totor {
  word-wrap: break-word;
  display: inline-block;
}

<div class="item_container">
  <div class="treebold" ng-bind="input1"></div>
  <div class="totor" ng-bind="input2_SOLONG"></div>
</div>

Answer 1

我认为您正在寻找一些布局代码。尝试将display: flex;添加到您的容器中，然后您可以根据宽度或您的喜好控制两个div彼此相邻的位置。

.item_container {
  display: flex;
}

.treebold {
  padding: 20px;
  min-width: 150px;
    word-wrap: break-word;
    display:inline-block;
}

.totor {
  padding: 20px;
    word-wrap: break-word;    
    display:inline-block;
}

<div class="item_container">

  <div class="treebold" ng-bind="input1">Lorem ipsum dolor </div>

  <div class="totor" ng-bind="input2_SOLONG">Integer et nisl nunc. Praesent fermentum orci sed turpis consectetur, eu dapibus nisi tristique. </div>

</div>

Answer 2

根据您的要求调整“ .treebold”的填充。

.item_container {
  display: flex;
}

.treebold {
  padding-right: 20px; 
}

.totor {
  flex:1;
}

<div class="item_container">

  <div class="treebold" ng-bind="input1">small content holder </div>

  <div class="totor" ng-bind="input2_SOLONG">This holder can have a very very very very long long long long content.Need to wrap it correctly using CSS </div>

</div>

Answer 3

很难确切地说出您想要的外观，但您的解决方案可能像display: inline一样简单。

显示：行内块阻止自动换行：断行

3 个答案: