多行HTML文本区域

Question

我的表单继承了几个CSS样式，而文本区域（textarea）默认只有一行 - 如果您键入一段话，它不会自动换行，而是继续在同一行上。如何强制它回到多行输出？我已经在HTML中设置了“rows”和“cols”属性，但似乎没有任何作用。

HTML嵌套非常深，但实际的输入元素是：

<input name="input47" type="textarea" rows="3" cols="10" />

我尝试过的CSS代码是：

body form ol.sections li ol.prompts li ol.entries li ol.inputs li input[type=textarea] {
  height: 500px !important;
  white-space: normal !important;
}

无论是否使用!important，500px都可以正常工作。但是文本区域中只有一行文字，并垂直居中（适用于Chrome和Safari）。

编辑：显然我需要更了解HTML-应该是。

- macaroon5

---

你想使用JavaScript或其他客户端脚本语言动态更改它吗？ - Joseph Marikle

没有真实的例子很难复现。 - spliter

一个简短、自包含、正确（可编译）的示例会非常有帮助。您能否添加您遇到问题的CSS和HTML呢？ - andyb

Answer 1

你在这里误用了 <input /> 元素。你想要的是：

<textarea name="input47" rows="3" cols="10">
        Your multiline text is here.
    </textarea>

- spliter

---

哈，哎呀，我自己刚刚想明白了。 - macaroon5

Answer 2

我假设你有类似的东西

white-space: nowrap;

应用于样式表中的文本区域，这就是使整个文本块在一行呈现的原因。

只需添加类似于

textarea#myfield {
    white-space: normal
}

在上面的样式中不应该需要使用!important，但如果您没有得到结果，可以尝试使用!important

- spliter

---

自从您添加了示例后，问题完全不同，因此我已经添加了另一个答案。 - spliter

我也遇到了同样的问题。即使使用 white-space: normal，它也无法进入多行。 - Somnath Muluk

Answer 3

请注意，除了 rows 和 cols 之外，您还可以设置 height 和 width，这会影响它。可能情况是您设置了 rows，但 css 属性 height 覆盖了它。

- mkk

---

似乎并不重要——我刚试着将高度设置为500像素，但仍然只有一行文本在垂直居中。 - macaroon5

你尝试过添加!important吗？例如：height: 500px !important; 你使用的是哪个浏览器？ 你能提供一个问题链接吗？或者至少复制粘贴HTML结构和相关CSS？ - mkk

Answer 4

使用UnityEngine; 使用System.Collections;

public class GameFSM : MonoBehaviour { public enum {LevelAwal, diam, terbang/lompat, objek, pertanyaan, bintang, menembak, menghindar, enemy, nyawa, GameOver, NextLevel}

public TurnStates state;
public bool gameInProgress = true;

void Start () {
    state = GameFSM.Mulai.Init;
    StartCoroutine ("TurnFSM");
}
private IEnumerator TurnFSM (){
    while(gameInProgress){
        switch(state){
        case TurnStates.LevelAwal:
            if( Permainan Awal()) {* state = diam:}
            break;
        case TurnStates.diam:
            if(Mulai()) {* state =lompat/terbang;}
            break;
        case TurnStates.Jump:
            if( Melompat()) {* state = objek;}
            break;
        case TurnStates.benda:
            if( mencari objek()) {* state = pertanyaan;}
            if (menghindar ()) {* state = enemy;}
            break;
        case TurnStates.objek:
            if( mencari Benda ()) {* state = pertanyaan;}
            if(Menembak()) {* state = enemy;}
            break;
        case TurnStates.enemy:
            if( Terkena Enemy ()) {* state = nyawa;}
            Break;
        case TurnStates.soal:
            if( benar ()) {* state = k;}
            else (salah ()) {* state = nyawa;}
            break;
        case TurnStates.nyawa:
            if(nyawa masih tersedia ()) {* state = diam;}
            else (nyawa masih habis ()) {* state = GameOver;}
            Break;
        case TurnStates.Kunci:
            if( berhasil menjawab()) {*state = NextGame;}
            break;
        case TurnState.NextGame :
            if (DoneLevel ()) {* state = LevelBaru;}
            break;
        }
        yield return null;
    } 
}

- hatika dian nurani

---

我建议在你的代码旁边加上一些解释。另外，请确保你的所有代码都被包含在 StackOverflow 代码格式中，以便更易读。 - Collin Barrett