How can I indent parts of a Views field?

Question

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?

Answer 1

1. Put the class clearfix as the row class (format->settings). If your theme does not have clearfix defined, define it yourself.
2. Hide the output of the other two fields (click on the field in views form and you will see this setting 'exclude from display').
3. Create a global: Custom text field and make sure it is the last field in the views list of fields.

4. Rewrite results -> rewrite the output of this global text field, and from the replacement patterns select field 2 and 3 as tokens. Also add a class for that field in style settings such as 'align-block'. Define it as follows:

   align-block { overflow:hidden; }

in your css file.

1. Add a class to your image field such as 'float-left'. Define it as follows:

   float-left { float:left; }

in your css file.