HTML/CSS textarea - 如何防止仅对带有连字符的单词进行自动换行

Question

在 textarea 中我想使用自动换行/换行，但不希望在带有连字符的单词上使用

这是代码

#wrap {
  width: 250px;
  position: relative;
  font-family: sans-serif;
  height: 80px;
}

#wrap .area {
  resize: none;
  outline: none;
  display: block;
  width: 100%;
  padding: 0;
  position: absolute;
  top: 0;
  font-family: sans-serif;
  font-size: 20px;
  text-align: center;
}

#wrap textarea.area {
  left: 0;
  height: 100%;border: 2px solid;
  background: transparent;
}

<div id="wrap" style="height: 300px;">
<textarea name="test" class="area" style="font-family: Comic Sans MS;">Line1
Line2
Line3-ShouldBeStillLine3-StillLine3</textarea></div>

单词'Line3-ShouldBeStillLine3-StillLine3'不应该换行。我知道它不适合 250px 的宽度，但在这种情况下没问题。我无法在 textarea 中使用它。

Answer 1

将 white-space: nowrap; 添加到 textarea 元素。但是，是的，正如您提到的，它不适合。

编辑 ~ 添加 wrap="off" 到 HTML textarea 元素。

#wrap {
  width: 250px;
  position: relative;
  font-family: sans-serif;
  height: 80px;
}

#wrap .area {
  resize: none;
  outline: none;
  display: block;
  width: 100%;
  padding: 0;
  position: absolute;
  top: 0;
  font-family: sans-serif;
  font-size: 20px;
  text-align: center;
}

#wrap textarea.area {
  left: 0;
  height: 100%;
  border: 2px solid;
  background: transparent;
}

textarea {
  /* white-space: nowrap; ~ is replaced by wrap="off" in HTML */
}

<div id="wrap" style="height: 300px;">
  <textarea name="test" class="area" style="font-family: Comic Sans MS;" wrap="off">Line1
Line2
Line3-ShouldBeStillLine3-StillLine3</textarea></div>

HTML/CSS textarea - 如何防止仅对带有连字符的单词进行自动换行

HTML/CSS textarea - how to prevent word-wrap only for words with hyphen

html

css

word-break