Question

我有一个div，当用户输入到将文本复制到div中的textarea时会扩展。我希望div在它撞到另一个div的外边缘时停止扩展它的宽度，但是我没有在网上找到解决方法。目前当div击中外边缘时，它只是移动到下面的下一行，直到它是线上唯一的元素（我不想要）。我希望它向下扩展它的高度。

See this jsfiddle正是我的意思并输入第一个textarea

我也不想硬编码任何像素值（如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>

这样做的方法是我将输入浮动到左边，使其脱离正常流量并将输出范围转换为块。通常阻止在它们之前浮动的元素下面的元素将忽略浮动元素，与它们在同一条线上并在它们下方滑动。

然而，在span中我添加了一个属性：

overflow: auto;

这会把它变成block formatting context，这些元素的一个特征就是它们尊重它们旁边的浮动元素的宽度，并且它们将紧挨着它们占据下一个宽度的100％随着浮动的大小动态地浮动，增长和收缩。

最后，我补充道：

word-wrap: break-word;

到span，以便长词会突破多行。

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

Answer 2

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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" style="display=table;overflow:scrolling;"></div>
        </div>
      </div>
    </div>
  </div>

＆＃13;

当元素达到另一个元素的固定宽度时，阻止元素扩展其宽度

2 个答案: