在段落元素中缩进列表的第二行（不是UL或OL）

Question

I have a table with the following structure:

 html { width: 400px; } 

 <table> <tr> <td>Description:</td> <td style="white-space: pre-wrap;"> Some text which could be quite long with some 'simple' lists created by the user like this: - Point 1 - Point 2 - Point 3 - Another point which is a bit longer than the previous one - Point 4 </td> </tr> </table> 

When I would view this in the browsers, on a screen with a small width, one of the bullet points will wrap to the new line and start at the beginning of this new line.

Ideally I want this bullet point to have the same indentation as the line before so both lines of text of the same bullet point will have the same indentation.

In case you're wondering, the reason why there is no ordered or unordered list element is because the user is limited to using a simple textarea to enter their content.

Could anyone tell me if this is possible, and if so, how?

Thanks in advance.

Answer 1

Shouldn't the code be like this:

<table>
    <tr>
      <td>Description:</td>
      <td style="white-space: pre-wrap;">
Some text which could be quite long with some 'simple' lists created by the user like this:
<ul>
<li>Point 1</li>
<li>Point 2</li>
<li>Point 3</li>
<li>Another point which is a bit longer than the previous one</li>
<li>Point 4</li>
</ul>
      </td>
  </tr>
</table>

You need to use proper ul and li tags instead of - .

EDIT

If you are willing to populate the value from some text-area field, then you might implement WYSIWYG text editors like TinyMCE , CKeditor .