javascript - 如何创建一个自动将内容自动换行的 div，以便 div 永远不会水平增长大于其容器？

Question

我有这样的结构:

<div id="container">
    <select name="Country">
        <option value="1">Argentina</option>
        <option value="2">Australia</option>
        ...
    </select>
    <div id="description"></div>

    <input ...
    <input ...
    <input ...
    contents ...
    contents ...
</div>

#description div 将根据选择选项动态填充。如果一行不足以容纳 #description 的内容，我希望 #description div 自动换行，而不是强行扩展容器。

要注意的是，我不想给 #container 一个固定的宽度，因为我希望 #container 的宽度可以根据所有容器内的元素，除了这个#description div。我也不想给 #description 固定宽度，因为我希望 #description div 可以增长/收缩取决于 #container。

#container 本身确实可以变大或变小，但这只会在页面加载时发生，因为它会用当前值和其他内容填充 select 的选项。但是一旦页面加载完成，我不希望 #container 的宽度发生变化，因此出现了这种困境。我尝试将 #description 宽度设置为 100%，但它也不起作用。我该如何解决这个问题？谢谢。

Answer 1

在您的描述 block 中使用自动换行 CSS 属性。在这种情况下，您可以以百分比形式给出宽度，允许描述 div 根据容器的宽度加宽或缩小。您还可以尝试使用 vw 来控制容器和描述的宽度，并同时使用自动换行。查看this link有关 CSS vw 的更多信息。

#description{
  word-wrap: break-word;
}

更新解决方法:

Fiddle

preset = [];
info = [];
	
preset.push ("Select ");
info.push ("");
	
preset.push ("1. Top ");
info.push ("Print Ten Members who got the top results. For awarding purposes.");
	
preset.push ("2. New ");
info.push ("Print all new members of the month.");
	
preset.push ("3. Inactive ");
info.push ("Print all inactive members of the month. Including members who delete their profile.");

$( document ).ready(function() {
	for (var i = 0; i < preset.length; i++) {
		$('#options').append($('<option>', { 
			value: i,
			text : preset[i] 
		}));	
	}
});
  
$('#options').change(function(){
	var idx = $('option:selected',$(this)).index();
	$('#description').text(info[idx]);
});

#container {
  background-color:#DDDDDD;
  border: black solid 1px;
  position:absolute;
  padding:20px;
  font-family: Arial, sans-serif;
  width: 40%;
}

#options {
  width: 50%;
  max-width: 200px;
  min-width: 80px;
}

input[type=button] {
  width: 50px;
}

#description {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <select id="options"></select>
  <input type="button" value="Print"/>
  <div id="description"></div>
</div>