The View form will be displayed as a HTML table. About wrapping of the text in the table you can read this and this old answers.
In case of View form you can use for example the following CSS style
div.ui-jqdialog-content td.form-view-data {
white-space: normal !important;
height: auto;
vertical-align: middle;
padding-top: 3px; padding-bottom: 3px
}
In the case the view form with long data can look like
The problem with the wrong left float in the first line of long text will be clear if you examine the corresponding HTML code. You will see at the beginning of every cell with the data. The empty cell has <span> </span> as the HTML contain. I am not sure whether it's a bug that will be inserted twice, but in case of wrapping of the text the is not good. It can be removed for example with the following code:
beforeShowForm: function ($form){
$form.find("td.DataTD").each(function () {
var html = $(this).html(); // <span> </span>
if (html.substr(0, 6) === " ") {
$(this).html(html.substr(6));
}
});
}
The demo shows that after the above changes the long text will be displayed good enough:
You don't post how you fill the icons from the Status column. I hope, that after the above changes the icon will be look better. If you will still have any problem you can examine the HTML code from the corresponding cell (you can include alert(html) in the code of beforeShowForm) and modify the code so that it will be displayed better.
You can find the demo which I wrote for the answer here. You need just select the row with the long text to display the view form.
