Long paragraph breaks list layout - html

Question

I have an unordered list with list-style-type:none to which I manually added bullets using :before.
The problem here is that if a paragraph inside one of the <li>s gets long enough to wrap around, the width of the paragraph itself will be too long to fit behind the bullet and so it gets pushed to a new line:
ul {
list-style-type: none;
padding: 0;
}
li {
padding:0 0 0 .5em;
}
li:before {
content:"- ";
position:relative;
vertical-align: top;
}
li > p {
display:inline-block;
margin:0;
/*max-width:calc(100% - 2em);*/
}
<ul>
<li><p>Looks normal</p></li>
<li><p>Looks normal with a<br>line break too.</p></li>
<li><p>If a line is long enough, it wraps (as it should) and the layout is somehow destroyed. Just adding some more text to make sure the text wraps.</p></li>
</ul>
http://jsfiddle.net/1xaamone/
As you can see in my example, I already have a workaround, but I wonder if there's a solution that works without calc() to improve browser compatibility even further.

Answer 1

Set white-space: nowrap on the parent li element and then reset that by setting white-space: normal on the child p element:
Updated Example
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 0 .5em;
white-space: nowrap;
}
li::before {
content: "- ";
position: relative;
vertical-align: top;
}
li > p {
display: inline-block;
margin: 0;
white-space: normal;
}
<ul>
<li><p>Looks normal</p></li>
<li><p>Looks normal with a<br>line break too.</p></li>
<li><p>If a line is long enough, it wraps (as it should) and the layout is somehow destroyed. Just adding some more text to make sure the text wraps.</p></li>
</ul>
Alternatively, you could also absolutely position the pseudo element relative to the parent li element and then displace it with padding.
Updated Example
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 0 .5em;
position: relative;
}
li::before {
content: "- ";
position: absolute;
top: 0;
left: 0;
}
li > p {
display: inline-block;
margin: 0;
}
<ul>
<li><p>Looks normal</p></li>
<li><p>Looks normal with a<br>line break too.</p></li>
<li><p>If a line is long enough, it wraps (as it should) and the layout is somehow destroyed. Just adding some more text to make sure the text wraps.</p></li>
</ul>

Answer 2

Simply removing the <p> tags also works.
Example
<ul>
<li>Looks normal</li>
<li>Looks normal with a<br>line break too.</li>
<li>If a line is long enough, it wraps (as it should) and the layout is somehow destroyed. Just adding some more text to make sure the text wraps.</li>
ul {
list-style-type: none;
padding: 0;
}
li {
padding:0 0 0 .5em;
}
li:before {
content:"- ";
position:relative;
vertical-align: top;
}
li > p {
display:inline-block;
margin:0;
/*max-width:calc(100% - 2em);*/
}