javascript - 阻止元素在达到另一个元素的固定宽度时扩展其宽度

Question

我有一个 div，它会随着用户在文本区域中键入内容而扩展，该文本区域会将其文本复制到 div 中。我希望该 div 在碰到作为其祖 parent 的另一个 div 的外边缘时停止扩展其宽度，但我在网上找不到如何做到这一点的解决方案。当前，当 div 到达外边缘时，它只是将自己移动到下面的下一行，直到它成为该行中唯一的元素(我不想要)。我希望它向下扩展高度。

See this jsfiddle正是我的意思，然后在第一个文本区域中输入

我也不想对任何像素值进行硬编码(例如 max-width: 16px; 或其他)。我想让它足够动态，无论 div 可扩展到多少空间，它都能正常工作。

 function copyText(callingName, receivingName){
      var significantDiv = $('[name=' + callingName +']');
      var significantSpan = $("#" + receivingName);
      significantSpan.text(significantDiv.val());
    }//end copyText()

body{
	background-color: rgb(90, 90, 96);
	font-family: "Lucida Sans Unicode";
  font-weight:bold; 
  font-size:30px
}

input[type=text]{
	border-radius:30px;
	background-color:rgb(128, 128, 137);
	border-style:none;
	padding:15px;
	outline:none;
	margin-bottom:10px;
	vertical-align: middle;
}

input[type=text]:focus{
	background-color:rgb(149, 149, 160);
}

div.addP{
	float:left;
	min-width:50%;
	max-width:50%;
}

.textAreaColumn{
	display:inline-block;
	vertical-align: top;
	outline: solid 1px lime;
}

#someText0Span{
	display: inline-block;

	outline: solid 1px orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="addP" style= "outline:solid 1px blue;">space</div>
  <div class="addP" style="outline:solid 1px red"><!--Everything in this div is in the right column of info.-->
    <div class="inputRow">
      Type some text:
      <div class="textAreaColumn" id="someTextColumn">
        <div class="singleTextAreaContainer">
          <input type="text" name="someText0" onkeyup="copyText('someText0','someText0Span')">
        </div>
      </div>
    </div>
    <div class="inputRow">
      Some text:
      <div class="textAreaColumn" id="moreTextColumn">
        <div class="singleTextAreaContainer">
          <input type="text" name="moreText0"> <div id="someText0Span"></div>
        </div>
      </div>
    </div>
  </div>

Answer 1

由于您使用选择器的方式，您的代码对我来说有点难以理解，所以我从白纸开始，但您应该能够在您自己的代码中使用我在下面所做的事情

function copyText(callingName, receivingName){
      var significantDiv = $('[name=' + callingName +']');
      var significantSpan = $("#" + receivingName);
      significantSpan.text(significantDiv.val());
    }

body {
  padding: 20px
}

input {
  padding: 10px 15px;
  border: 2px solid;
}

input:focus {
  outline: none;
 }

[name] {
  margin-bottom: 20px;
  
 }

.container {
  width: 300px;
  border: 3px solid;
  margin: 20px auto;
  padding: 20px 10px;
  overflow: auto;
}


/*Code that you should pay attention to is below*/

input {
  float: left;
  
}

span {
  display: block;
  overflow: auto; /*turn element to block formatting context*/
  word-wrap: break-word;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name='input' 

onkeyup="copyText('input','output')">

<div class="container">
  <input type="text">
  <span id='output'></span>
</div>

它的工作方式是我将输入 float 到左侧，将其从正常流中取出，并将输出跨度变成一个 block 。通常情况下，在 float 元素下方的 block 元素会忽略 float 元素，出现在与它们相同的行上并在它们下方滑动。

但是，对于 span 我添加了一个属性:

overflow: auto;

这会将它变成一个 block formatting context这些类型的元素的一个特点是它们尊重它们旁边的 float 元素的宽度，并且会坐在它们旁边占据 float 旁边剩余宽度的 100%，随着 float 的大小动态增长和收缩.

最后，我补充说:

word-wrap: break-word;

到 span 以便长单词跨多行。

请注意 float 元素，如果容器中没有其他元素大于 float 元素，则父元素的高度将折叠。您可以使用 clearfix 解决方案来解决这个问题