Forums/Tips & Tricks

Getting rid of the line break after a WSYIWYG text field

Michael Slater
posted this on March 25, 2011, 16:58

If you have a WYSIWYG text field, then that text is always wrapped in <p> tags. This can be problematic when you want something like:

<w:excerpt /> <a href="<w:path url='/article' />">Read More</a>

That is, you want the Read More link to be at the end of the line, like this:

This is an excerpt of my article. Read More

But instead, what you get is this:

This is an excerpt of my article.

Read More

Since the p tag is rendered as part of <w:excerpt />, you're stuck with it (unless you switch the field to be plain text instead of WYSIWYG).

But there is a solution! As long as the excerpt has only one paragraph, use HTML like this:

<div class="excerpt"><w:excerpt /> <a href="<w:path url='/article' />">Read More</a></div>

And then define a style to make all p tags inside the excerpt div display as inline elements, instead of block elements:

div.excerpt p {display:inline}