Html textarea 元素中的换行符

Line breaks in textarea element

提问by Thomas Clayson

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).

这是纯 HTML。（没有 php 或类似的东西，如果你想知道它的背景，它是一个在 web 视图中带有 HTML 的 C# 应用程序）。

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

我所有的 HTML 文件的格式都很好，并且为了可维护性等而正确缩进。

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.

在换行符<textarea></textarea>元素是那里得到换行符在页面上。但是，它还包括 textarea 元素中的缩进。

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.

我能想到的解决这个问题的唯一方法是删除缩进。这不是世界末日，但还有另一种方式来保持良好的格式吗？谢谢。

回答by Marcx

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

您可以使用
（这意味着 html 中的新行），但也许这不是一个很好的格式，就像您说的那样......

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>

回答by derekerdmann

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

您的问题没有纯 HTML 解决方案。Textareas 总是在其内容中显示任何空格。

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.

在一个完美的世界中，您将能够利用 CSS 属性white-space；不幸的是，它也不适用于 textareas。

回答by Shadow Wizard is Ear For You

You can use <div>with contenteditableattribute:

您可以使用<div>withcontenteditable属性：

<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 />
...

回答by Dave Newton

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

不; textarea 会吐出它实际拥有的任何内容。

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

您可以从 JavaScript 注入值，但这对于一个孤立的事物来说似乎需要做很多工作。

回答by VinnyG

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

在 C# 中，如果要将新行发送到文本区域，可以使用 Environment.NewLine

回答by Confederate 3320

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.

如果你只想要一个项目列表，你可以使用 <ul> <li>"Monday"</li> <li>"Tuesday"</li>... </ul>
Using<ul><li></li></ul>将启动一个预先格式化的列表，<ul>启动列表并<li>启动列表中的每个项目。此方法不需要任何 java 或 css，并且会自动缩进。

回答by joerg

This works for me in angular:

这对我有用：

ts: log: string[] = [];

ts： log: string[] = [];

html: <textarea row=5 col=50>{{ log.join("&#10;") }}</textarea>

html： <textarea row=5 col=50>{{ log.join("&#10;") }}</textarea>

result: in textarea each item of log is shown in a new line.

结果：在 textarea 中，日志的每一项都显示在一个新行中。

回答by deejayy

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

如果对您有好处，请尝试 <br/>：

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

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