Line breaks in textarea element

问题

This is PURE HTML. (no php or anything like that, if you want to know the background its a C# application with HTML in a web view).

All my HTML files are nicely formatted and correctly indented for maintainability and such.

Here is an excerpt:

<tr>
    <td class="label">Clinic Times:</td>
    <td><textarea name="familyPlanningClinicSessionsClinicTimes">Monday:
    Tuesday:
    Wednesday:
    Thursday:
    Friday:
    Saturday:
    Sunday:</textarea></td>
</tr>

The line breaks in the <textarea></textarea> element are there to get the line breaks on the page. However it also includes the indentation in the textarea element.

e.g.

The only way I can think to remove this issue is to remove the indentation. Its not the end of the world, but is there another way, to keep the nice formatting? Thanks.

回答1:

You could use the 
 (it means new line in html) but maybe that's not a nice formatting, like you said...

The only way I can think to remove this issue is to remove the indentation. Its not the end of the world, but is there another way, to keep the nice formatting?

<tr>
  <td class="label">Clinic Times:</td>
  <td><textarea name="familyPlanningClinicSessionsClinicTimes">Monday:&#10;Tuesday:&#10;Wednesday:&#10;Thursday:&#10;Friday:&#10;Saturday:&#10;Sunday:</textarea></td>
</tr>

回答2:

There isn't a pure HTML solution to your problem. Textareas always display any whitespace in their contents.

In a perfect world, you'd be able to take advantage of the CSS property white-space; unfortunately, it isn't applied to textareas either.

回答3:

You can use <div> with contenteditable attribute:

<div contenteditable="true" style="width: 450px; height: 300px; white-space: pre-line;" name="familyPlanningClinicSessionsClinicTimes">Monday:
                            Tuesday:
                            Wednesday:
                            Thursday:
                            Friday:
                            Saturday:
                            Sunday:</div>

But in your case I think idea solution will be just using several ordinary text boxes, one for each day:

Monday: <input type="text" name="familyPlanningClinicSessionsClinicTimesMonday" /><br />
Tuesday: <input type="text" name="familyPlanningClinicSessionsClinicTimesTuesday" /><br />
...

回答4:

Nope; a textarea will spit back whatever it actually has.

You could inject the value from JavaScript, but that seems like a lot of work for an isolated thing.

回答5:

In C# if you want to send a new line to a textarea you can use Environment.NewLine

回答6:

If you merely want a list of items, you can use <ul> <li>"Monday"</li> <li>"Tuesday"</li> ... </ul>
Using <ul><li></li></ul> will start a preformatted list with <ul> starting the list and <li> starting each item on the list. This method does not require any java or css and will auto indent.

回答7:

Try <br/> if it is good for you:

Monday:<br/>Tuesday:<br/>...

来源：https://stackoverflow.com/questions/7981786/line-breaks-in-textarea-element

标签

html

css

internet-explorer

textarea