如何在不替换div的情况下使div文本内容自动换行，并使div向右扩展？

内在的

屏幕截图

我有一个div节点列表。每个节点有2行（divs）。每行有3个内联div（空格和内容）。

问题在于，当content-div的文本较长时，div会移至“下一个”行。我需要将div留在原处，并将文本换行，但不能从视觉上覆盖下面的任何其他注释。

同样，div div需要完全正确地扩展，填充空间。

任何帮助表示赞赏！

.tree{
  font-family: sans-serif;
  font-size: 14px;
}

.node{
}

.row1{
}

.row2{
}

.node-icon{
  display: inline-block;
  border: 1px solid grey;
  width: 1em;
  text-align: center;
  vertical-align: top;
  
}

.spacer{
  display: inline-block;
  border: 1px solid grey;
  width: 1em;
  vertical-align: top;
 
}

.node-title{
  display: inline-block;
  border: 1px solid grey;
  vertical-align: top;
}

.node-notes{
  display: inline-block;
  border: 1px solid grey;
  font-size: 0.8em;
  vertical-align: top;
}

  <div class="tree">
    
    
    <div id="node1" class="node">
      <div class="row1">
        <div class="node-icon">•</div>
        <div class="spacer">&nbsp;</div>
        <div class="node-title">Node 1 - problem 1</div>
      </div>
      <div class="row2">
        <div class="spacer">&nbsp;</div>
        <div class="spacer">&nbsp;</div>
        <div class="node-notes">Node 1 notes. How can I get the div to fill out to the right?</div>
      </div>  
    </div>  <!--// node 1 end -->

    <hr>
    
    <div id="node2" class="node">
      <div class="row1">
        <div class="node-icon">•</div>
        <div class="spacer">&nbsp;</div>
        <div class="node-title">Node 2 - problem 2</div>
      </div>
      <div class="row2">
        <div class="spacer">&nbsp;</div>
        <div class="spacer">&nbsp;</div>
        <div class="node-notes">Node 2 notes. Why does the div, that node 2 notes reside in, break down to another 'row' when the text is long? How can I achieve that the div stays where it is and that only the text and not the div wraps down to another row?</div>
      </div>  
    </div>  <!--// node2 end -->

  
  </div> <!--// tree end -->

石田雷

您可以像我以前使用的那样在Width中使用“ calc”。calc（）函数执行计算以用作属性值。

 width: calc(100% - 42px);

.tree{
  font-family: sans-serif;
  font-size: 14px;
}

.node{
}

.row1{
}

.row2{
}

.node-icon{
  display: inline-block;
  border: 1px solid grey;
  width: 1em;
  text-align: center;
  vertical-align: top;
  
}

.spacer{
  display: inline-block;
  border: 1px solid grey;
  width: 1em;
  vertical-align: top;
 
}

.node-title{
  display: inline-block;
  border: 1px solid grey;
  vertical-align: top;
}

.node-notes{
  display: inline-block;
  border: 1px solid grey;
  font-size: 0.8em;
  vertical-align: top;
  width: calc(100% - 42px);
}

<div class="tree">
    
    
    <div id="node1" class="node">
      <div class="row1">
        <div class="node-icon">•</div>
        <div class="spacer">&nbsp;</div>
        <div class="node-title">Node 1 - problem 1</div>
      </div>
      <div class="row2">
        <div class="spacer">&nbsp;</div>
        <div class="spacer">&nbsp;</div>
        <div class="node-notes">Node 1 notes. How can I get the div to fill out to the right?</div>
      </div>  
    </div>  <!--// node 1 end -->

    <hr>
    
    <div id="node2" class="node">
      <div class="row1">
        <div class="node-icon">•</div>
        <div class="spacer">&nbsp;</div>
        <div class="node-title">Node 2 - problem 2</div>
      </div>
      <div class="row2">
        <div class="spacer">&nbsp;</div>
        <div class="spacer">&nbsp;</div>
        <div class="node-notes">Node 2 notes. Why does the div, that node 2 notes reside in, break down to another 'row' when the text is long? How can I achieve that the div stays where it is and that only the text and not the div wraps down to another row?</div>
      </div>  
    </div>  <!--// node2 end -->

  
  </div> <!--// tree end -->

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。