Свернуть эту таблицуРазвернуть эту таблицу

Question

Мое приложение будет хорошо выглядеть, если browser window is fully maximized. И контент получает collapsed, когда я minimizedbrowser window.

Мне не нужен контент, который нужно разрушить. Я дал div, который выглядит как textarea, чтобы отобразить сообщение только в %.

Мой Jsp будет,

<div style="padding-left: 16px;" id="messageLayout"> 
    <div id="messageDisplayArea" > 

    </div> 
</div> 

Мой jquery будет, когда я нажал send button,

function send(){ 
    name = $("#name").val(); 
    message = $("#message").val(); 
    var time = "Time"; 

    var user = "<div id='user' class='fontStyle'>"+name+"</div>"; 
    var msg = "<div id='msg' class='fontStyle'>"+message+"</div>"; 
    var timeStamp = "<div id='time' class='fontStyle'>"+time+"</div>"; 

    var row = "<div id='msgSet' >"+ user + msg + timeStamp +"</div>"; 

    $("#messageDisplayArea").append(row); 
} 

Мой CSS будет,

#messageDisplayArea { 
    height: 250px; 
    width: 100%; 
    overflow: auto; 
    border-color: #6495ED; 
    white-space: normal; 
    border-style: solid; 
    border-width: 1px; 
    background-color: white; 
} 

#user { 
    width: 10%; 
    float: left; 
    color: red; 
    word-wrap: break-word; 
} 

#msg { 
    width: 79%; 
    color: green; 
    float: left; 
    word-wrap: break-word; 
} 

#time { 
    width: 10%; 
    float:left; 
    color: gray; 
    word-wrap: break-word; 
    padding-left: 5px; 
} 

#msgSet { 
    width: 100%; 
    float:left; 
    word-wrap: break-word; 
    padding-bottom: 5px; 
    padding-top: 5px; 
} 

Хорошие ответы, безусловно, оценили.

Answer 1

попробуйте удалить ваш word-wrap: break-word