我有这样的结构:
<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%,但它也不起作用。我该如何解决这个问题?谢谢。
最佳答案
在您的描述 block 中使用自动换行 CSS 属性。在这种情况下,您可以以百分比形式给出宽度,允许描述 div 根据容器的宽度加宽或缩小。您还可以尝试使用 vw
来控制容器和描述的宽度,并同时使用自动换行。查看this link有关 CSS vw
的更多信息。
#description{
word-wrap: break-word;
}
更新解决方法:
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>
关于javascript - 如何创建一个自动将内容自动换行的 div,以便 div 永远不会水平增长大于其容器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34389850/