css文本框中加默认值_如何使用HTML和CSS更改默认文本包装

与纸张不同，网页几乎可以无限地横向延伸 。 令人印象深刻的是，这并不是我们阅读时真正需要的东西。 浏览器根据文本容器的宽度和屏幕的宽度来包装文本，以便我们可以看到所有文本而不必向侧面滚动太多（仅向下滚动）。

除了包装外，浏览器还负责这些空间 。 它们将源代码中的多个连续空格合并到渲染页面上的一个空格中，并且在开始处理包装之前它们还注册了强制换行符。

何时更改默认文字换行

太好了，非常感谢。 但是，我们很容易在默认浏览器行为不是我们想要的情况下结束。 它可以是不应该 换行的标题， 也可以是段落中的单词比下一行更好 ，但最好在行末尾留一个看上去很奇怪的空白。

也可能发生了，我们非常需要文本中保留的那些空间 ，但是浏览器不断将它们合并为一个，从而迫使我们添加多个  在源代码中。

包装首选项也可能随文本的语言和目的而变化 。 普通话和法国诗歌不一定需要用完全相同的方式包装。

有很多CSS属性（和HTML元素！）可以控制换行和断点 ，还可以定义在换行之前如何处理空格和换行符 。

软包装机会和软包装休息

浏览器根据单词边界，连字符，音节，标点符号，空格等来决定将溢出的文本包装在何处。 这些地方都称为换行机会 ，当浏览器确实在一个这样的地方中断文本时，该中断称为换行中断 。

可以使用旧的<br>元素来完成强制额外中断的最简单方法。

空格

如果您熟悉white-space CSS属性，那么我敢打赌，您首先会以与其他许多属性相同的方式来了解它。 在寻找一种防止文字换行的方法时 。 white-space的nowrap值正是这样做的。

但是， white-space属性不仅仅是包装。 首先，什么是空白？ 这是一组空格字符 。 集合中的每个空间在长度，方向或两者上都互不相同。

一个典型的单个水平空格字符是我们通过按空格键添加的字符 。 Tab键也添加了类似的空间，但是长度更大 。 Enter键添加一个垂直空格以开始新行，并且  HTML中HTML在网页中添加了一个牢不可破的空间 。 像这样，有很多类型的空间构成“空白”。

正如我在开始时提到的，浏览器将源中的多个空间 （水平和垂直） 折叠为一个空间。 当需要换行时，他们还考虑使用这些空格字符来换行 （可以换行的地方）。

而且，正是这些浏览器操作我们可以使用white-space控制。 请注意， white-space属性不会影响所有类型的空间， 只会影响最常见的空间，例如规则的水平单个空格，制表符空间和换行符。

在下面，您可以看到示例文本的屏幕截图，该示例文本由浏览器包装以适合其容器 。 溢出发生在容器的底部，并且溢出的文本具有不同的颜色。 您会注意到代码中连续空格的折叠 。

<div class='textContainer'>
��? Hello.  ��? Hello.                 ��? Hello

��? Hello.



��? Hello.       ��? Hello.   ��? Hello.  ��? Hello.
��? Hello. ��? Hello. ��? Hello. ��? Hello.
��? Hello. ��? Hello.      ��? Hello. ��? Hello. ��? Hello.

��? Hello. ��? Hello.    ��? Hello. ��? Hello. ��? Hello.
��? Hello.               ��? Hello. ��? Hello.
��? Hello.   ��? Hello.
</div>

.textContainer {
  width: 500px;
  height: 320px;
}

应用white-space: nowrap; 规则，文本的换行以以下方式更改：

.textContainer {
  /* ... */
  white-space: nowrap;
}

该pre值white-space 保留了所有的空格 ，并防止文本换行 ：

.textContainer {
  /* ... */
  white-space: pre;
}

在pre-wrap的价值white-space 保留了所有的空格和换行文字 ：

.textContainer {
  /* ... */
  white-space: pre-wrap;
}

最后， pre-line的值white-space 保留垂直空格如新线和环绕文字 ：

.textContainer {
  /* ... */
  white-space: pre-line;
}

断字

您应该知道的另一个控制文本换行的重要CSS属性是word-break 。 您可以在上面的所有屏幕截图中看到，浏览器在右侧的单词“ hello”之前包裹了该文本 ，超出此范围文本就会溢出 。 浏览器没听错 。

但是，如果必须 允许将单词中的字母打断 以 使文本甚至在右侧看起来，您都需要对word-break属性使用break-all值：

.textContainer {
  /* ... */
  word-break: break-all;
}

除break-all和normal （属于默认换行符）之外， word-break属性还有第三个值。 keep-all值不允许断字 。

您可能看不到英语keep-all的效果。 但是，在单词中的字母本身就是有意义的单位的语言中，浏览器在换行时可能会破坏单词，因此可以使用keep-all来防止这种情况。

例如， 朝鲜语单词中的字母最初是为了包装而折断的， 但在 white-space: keep-all; 保持在一起 white-space: keep-all; 指定了规则。

<div class='textContainer'>ì�?¸ê³�?를 í�?¥í�?�? ë�?�?í�?�?, ì�? ë�?�?ì½�?ë�?�?ë¡�? í�?�?ì�?­ì�?�?ì�?¤. ì �?10í�?�? ì�? ë�?�?ì½�?ë�?�? êµ­ì �? í�?�?ì�?�?ê°�? 1997ë�?�? 3ì�?�? 10ì�?¼ë¶�?í�?° 12ì�?¼ê¹�?ì§�? ë�?�?ì�?¼ì�?�? ë§�?ì�?¸ì¦�?ì�?�?ì�?�? ì�?´ë¦½ë�?�?ë�?¤. ì§�?ê¸�? ë�?±ë¡�?í�?�?ì�?­ì�?�?ì�?¤. ì�?´ í�?�?ì�?�?ì�?�?ì�?�?ë�?�? ì�?�?ê³�? ì �?ë°�?ì�?�? ì �?문ê°�?ë�?¤ì�?´ í�?¨ê»�? 모ì�?¬ ë�?¤ì�?�?ê³¼ ê°�?ì�?�? ë¶�?ì�?¼ë¥¼ ë�?¤ë£¹ë�?�?ë�?¤.</div>

.textContainer {
  /* ... */
  word-break: keep-all;
}

此属性将来可能支持另一个称为break-word值。 稍后，在本文的“溢出包装”部分中，您将了解break-word工作原理。

分词机会

开发人员还可以使用<wbr> HTML元素在单词内添加换行机会 。 如果浏览器需要包装文本字符串，它将考虑出现<wbr>位置以提供包装机会。

<div class='textContainer'>
��? Hello.  ��? Hello.                 ��? H<wbr>ello

��? Hello.



��? Hello.       ��? Hello.   ��? Hello.  ��? Hello.
��? Hello. ��? Hello. ��? Hello. ��? Hello.
��? Hello. ��? Hello.      ��? Hello. ��? Hello. ��? Hello.

��? Hello. ��? Hello.    ��? Hello. ��? Hello. ��? Hello.
��? Hello.               ��? Hello. ��? Hello.
��? Hello.   ��? Hello.
</div>

.textContainer {
  /* ... */
  white-space: pre-wrap;
}

如果没有<wbr> ，整个“ Hello”一词将被换行。 通过将<wbr>添加到HTML代码中，我们通知浏览器可以在需要时自动打包该单词 。

连字号

hyphens CSS属性是控制单词中字母之间的分隔符的另一种方法 。 如果您有兴趣，我们将另外发表一篇有关CSS连字的文章 。 简而言之，该属性允许您通过连字符创建包装机会 。

它的auto值会提示浏览器在换行时在需要的地方自动断字和断词 。 manual值会强制浏览器在需要时包装我们添加的连字符机会 ，例如连字符（＆hyphen;）或­ （软连字符）。 如果none给出值， 连字符附近将不会进行换行 。

<div class='textContainer'>
bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse
bluehouse bluehouse bluehouse bluehouse bluehouse
</div>

.textContainer {
  /* ... */
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

溢出包装

该overflow-wrap CSS属性控制在一个浏览器可能会断词 （或保留空间，在不久的将来可能发生的支持，其中） 溢出 。 如果为overflow-wrap提供了break-word值，则在该行中没有其他软包装机会的情况下，该字将被中断 。

请注意， overflow-wrap也称为word-wrap （它们是别名）。

<div class='textContainer'>
bluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehouse
</div>

.textContainer {
  /* ... */
  overflow-wrap: break-word;
}

上面HTML代码中的字母之间没有空格（即没有换行的机会），因此文本最初并没有被换行，而是保留为一个单词 。

但是，当允许通过断词来包装文本（即，将break-word值提供给overflow-wrap ）时， 通过在需要的地方断开整个字符串来进行包装 。

翻译自: https://www.hongkiat.com/blog/change-default-text-wrapping-html-css/