I have a content/node View listing several node fields in an unformated list. The fields are displayed inline since they combine to make a message to users; on their own the fields don't mean much.
As you can see there are 3 fields above; user picture, user name, and the comment body. I have marked the order and the areas of the 3 separate span classes. The problem of course is that when field 3 has more than one line of text the subsequent lines are not indented enough and overlap field 1. I have tried using margin-left and padding-left in combination with the text-indent property, but since field 3 is inline the CSS only ends up indenting the first line instead of the lines after the first as I need. I can display field 3 as a block and this does allow me to have better control, however it places the field on a separate row, and as mentioned previously I need the fields to be displayed inline so that they combine to make a message. In other words, if you see the red line below I would like the field 3 text to wrap and indent in a way that it stays to the right of the red line for lines 2 and after.
So it would end up looking something like below, but of course with the beginning of the lines not clipped.
The only thing I can think of is having 2 copies of field 3, both of which are trimmed. Therefore the first copy would be trimmed to only show 1 line and the second would be trimmed to show everything after the first line, however the problem is that I'm not sure how to trim the beginning of a field. So how can this be achieved?