包装文本= “文本” 元件HTML/CSS

下面给出的HTML，包装文本= “文本” 元件HTML/CSS

<input type="text"/>

被显示在浏览器像这样：
This is how the above HTML is displayed in a browser.

当我添加以下文本，

快速的棕色狐狸跳过了懒狗。

用下面的HTML，

<input type="text" value="The quick brown fox jumped over the lazy dog."/>

它显示在浏览器中，像这样：
This is how the above HTML is displayed in a browser.

但我想它要显示在浏览器中，像这样：
This is how I would like the above HTML to be displayed in a browser.

我想要te xt在我的输入元素中进行换行。这可以在没有textarea的情况下完成吗？

来源

2011-03-13 Web_Designer

不，我不认为它可以。但为什么textarea不是一个选项？ – 2011-03-13 00:46:45

+11

使用textarea有时不是一个选项，因为您不想允许输入多行文本。只是包装一行文本（注意：它们不是同一件事）。 – 2013-08-16 06:27:47

这就是textarea的工作 - 用于多行文本输入。 inputwon't do it;它并没有设计成这样做。所以请使用textarea。除了它们的视觉差异之外，还可以通过JavaScript以相同方式访问它们（使用value属性）。

您可以通过input事件并仅使用replace(/\n/g, '')来防止换行符被输入。

来源

2011-03-13 00:48:08 alex

好吧，我想我只会使用textarea。谢谢！ – 2011-03-13 00:52:25

+18

这并没有真正回答如何在输入时显示包装时收集单行输入的问题。 – ehdv 2014-05-19 15:45:46

@ehdv：这是第二好的，因为被问的问题没有答案。 – rvighne 2014-07-20 23:45:40

字符会模仿一些意图

input.break { 
    word-wrap: break-word; 
    word-break: break-all; 
    height: 80px; 
}

来源

2015-08-04 16:27:26

这是一个真实的答案 – userlond 2015-11-26 05:45:14

任何人都知道这在所有浏览器中实现的效果如何？ – commonpike 2016-01-21 14:55:04

我刚刚在Firefox 43.0.4中测试过它，但它在Safari 9和Chrome 48中无法正常工作，它似乎可以正常工作：http://www.cssdesk.com/dbCSQ – 2016-02-02 04:05:42

您可以不它使用的输入，你需要使用文本区域代替。使用textarea的与wrap="soft"代码和属性的可选其余部分是这样的：

<textarea name="text" rows="14" cols="10" wrap="soft"> </textarea>

Atributes：要限制文本的数量在它例如为“40”的字符，你可以添加属性maxlength="40"像这个：<textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40"></textarea> 隐藏滚动的样式。如果您只使用overflow:scroll;或overflow:hidden;或overflow:auto;它只会影响一个滚动条。如果您想为每一个滚动条不同的属性然后使用这样overflow:scroll; overflow-x:auto; overflow-y:hidden;在风格方面的属性：为了使textarea的不可调整大小，你可以使用风格resize:none;这样的：

<textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40" style="overflow:hidden; resize:none;></textarea>

这样，你可以有或者例如一个有14行10列的文字区域，文字换行和最大字符长度为“40”的字符，其工作方式与输入文本框完全相同，但是使用行而不使用输入文本。

注： textarea的与行的作品像不像是在所有不工作取得与行输入<input type="text" name="tbox" size="10"></input>。

来源

2017-03-01 16:58:57 SeekLoad

包装文本= “文本” 元件HTML/CSS

回答

相关问题