How to do bullet points in a CSS class instance?

When I am typing in my TW instance, it’s fairly common that I want to use some custom CSS classes. I do this by writing a file called say “Styling”, give it the tag “$:/tags/Stylesheet” and then I might write a class such as this:

.prop {
border: 2px solid;
padding: 8px;
padding-left: 25px;
}

Then when I reference it I write something like:

@@.prop
This is some text.
@@

and it gives me a nice rectangled piece of text. Sometimes, I want to be able to have lists with bullet-points in these classes like this:

@@.prop
This is some text.

* I really
* like pineapples
* they're so juicy
* and delicious.
@@

but if you try this you’ll find that the line break between “This is some text” and the beginning of the list leads to the beginning of a new class instance (i.e. there’s a rectangle for the first sentence and a different rectangle surrounding the list) because TW views this empty line as the end of a paragraph I think. How can I have a list like this in a class instance without creating a new rectangle?

The list needs the linebreak before it, or it doesn’t work. Furthermore adding “”" at the beginning and end of the class works in that there’s only one rectangle shown but it fails in that the bullet points don’t render correctly (they just render as asterisks).

Not very elegant but you could do this

@@.prop
<div>

This is some text.

* I really
* like pineapples
* they're so juicy
* and delicious.
</div>
@@

I don’t think it is possible to do it in a good way using the wikitext @@ method but that you’d instead have to resort to pure html to style the outer block.

…so in other words this would be better:

<div class=prop>

This is some text.

* I really
* like pineapples
* they're so juicy
* and delicious.
</div>

As you say, not too elegant and had some minor issues for the other things I needed classes for but they’re all sorted out. Thank you very much!