如何创建一个将自动自动换行内容的div，以便div的水平方向永远不会比其容器大？

Question

I have this structure:

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

The #description div will be filled in on the fly according to the selection option. I want so that the #description div will automatically wordwrap, and not forcefully expand the container, if one line is not enough to hold the content of #description .

The catch is, I don't want to give a fixed width to #container because I want the #container 's width to be flexible according to all the elements inside the container, except this #description div. I also don't want to give fixed width to #description either, because I want the #description div can grow / shrink depends on the #container .

The #container itself indeed can grow or shrink, but it only happened when the page loads, as it fills up select's options with current values, and other stuffs. But once the page finish loaded, I don't want the width of the #container to change, hence this dilemma. I have tried to give #description width 100%, but it does not work too. How can I solve this? Thanks.

Answer 1

Use word-wrap CSS property in your description block. In this case you can give width in percentage allowing the description div to widen or shrink according to the width of the container. You can also try out the vw for keeping the width of container and description in control and use word-wrap in parallel. Check out this link for more information's on CSS vw .

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

Update with workaround:

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> 

Answer 2

Check this fiddle

here is the css required

html,body
{
  width:100%;
}

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