css word-wrap_CSS中分词“ break-all”和“ break-word”的值之间的差异

Bertha 。 2023-03-05 05:27 34阅读 0赞

css word-wrap

**Definition:**

**定义：**

What is the most fundamental element that comes to mind when you are considering to develop a web page? Words! If that was your answer, then pat yourself because you are already aware of what we are going to discuss in this article. The discussion here will revolve around the most basic aspect of web development that is "dealing with words". But what are we going to discuss about the words here? That property is known as [word-break in CSS][] but we won't be discussing the word-break property rather the focus here is on the word-break property's values and which are Break-all and Break-word.

在考虑开发网页时，想到的最基本要素是什么？ 话！ 如果是您的答案，请轻拍一下，因为您已经知道我们将在本文中讨论的内容。 这里的讨论将围绕Web开发的最基本方面，即“用词处理”。 但是，我们将在这里讨论这些单词呢？ 该属性[在CSS中][word-break in CSS]被称为[断字，][word-break in CSS]但我们将不讨论断字属性，而是将重点放在断字属性的值上，即Break-all和Break-word。

In this article, what we are trying to do is give web developers a better understanding of the Word-Break property based on its values. Learning about the property and the values that property upholds is equally important. As they say, incomplete knowledge is worse than no knowledge at all, therefore learning about the values of the word-break property is of the essence. Therefore, we will see the difference between the two values of the word-break property is CSS which are break-all and break-word.

在本文中，我们试图做的是让Web开发人员根据其值更好地理解Word-Break属性。 了解财产和财产所坚持的价值同样重要。 正如他们所说，不完整的知识总比没有知识差，因此，了解分词属性的值至关重要。 因此，我们将看到word-break属性的两个值之间的区别是CSS，即break-all和break-word。

### 全力以赴 **(**break-all**)** ###

The first and foremost value of the **word-break** property is the **break-all** value. This value as the name suggests helps in breaking words at any character and that again prevents overflow. Therefore, the sole purpose of this value as you would have already figured out is to break the component of a word so that overflow can be prevented. Not that tough to understand right? Well, implementation is also easy, go ahead and have a look at the example below.

**单词中断**属性的第一个也是最重要的值是**全部中断**值。 顾名思义，该值有助于破坏任何字符的单词，并再次防止溢出。 因此，您已经知道，此值的唯一目的是破坏单词的组成部分，从而可以防止溢出。 不难理解吗？ 好吧，实现也很容易，请继续看下面的示例。

**Syntax:**

**句法：**

element{
            Word-break:break-all;
        }

### 断词 **(**break-word**)** ###

The last but not the least, the **break-word value is used to prevent overflow** but here word may be broken at arbitrary points. Again, the break-word value has similar characteristics but here the word can be broken at arbitrary points or simply put at any random point. This value is also not that tough to understand, so why don’t we move ahead and have a look at an equally easy example.

最后但并非最不重要的一点是， **中断字值用于防止溢出，**但此处的字可在任意点处中断。 再次，断词值具有相似的特征，但是这里的词可以在任意点处折断或简单地放在任意随机点处。 这个值也不难理解，所以我们为什么不继续前进，看看同样简单的例子。

**Syntax:**

**句法：**

element{
            word-break: break-word;
        }

In the below example, you can see the difference between both the values of the property.

在下面的示例中，您可以看到两个属性值之间的差异。

**Example:**

**例：**

<!DOCTYPE html>
    
    <html>
    
    <head>
        <style>
            .break-word {
        
                width: 180px;
                border: 1px solid #006969;
                word-break: break-word;
            }
            
            .break-all {
        
                width: 180px;
                border: 1px solid #006969;
                word-break: break-all;
            }
        </style>
    </head>
    
    <body>
        <h1>The word-break Property</h1>
        <h2> break-word</h2>
        <p class="break-word">This is IncludeHelp.ThisisIncludeHelp.This is IncludeHelp.This is IncludeHelp.</p>
        <h2> break-all</h2>
        <p class="break-all">This is IncludeHelp.ThisisIncludeHelp.This is IncludeHelp.This is IncludeHelp.</p>
    </body>
    
    </html>

![word break vs break all in CSS example][]

**Conclusion:**

**结论：**

Now, as you can see the outputs of these two values you might have gotten the gist about the differences between these two values and their behavior. Both the values appear to be the same but are very different when implemented which could be seen in the outputs above. So go ahead and try it out yourself. And if you face any difficulties, we are always available to help you at [https://ask.includehelp.com/][https_ask.includehelp.com].

现在，您可以看到这两个值的输出，您可能已经了解了这两个值之间的差异及其行为。 这两个值看起来是相同的，但在实现时却非常不同，可以在上面的输出中看到。 因此，继续尝试一下。 并且，如果您遇到任何困难，我们随时可以在[https://ask.includehelp.com/上][https_ask.includehelp.com]为您提供帮助。

> 翻译自: [https://www.includehelp.com/code-snippets/difference-between-values-of-word-break-break-all-versus-break-word-in-css.aspx][https_www.includehelp.com_code-snippets_difference-between-values-of-word-break-break-all-versus-break-word-in-css.aspx]

css word-wrap

[word-break in CSS]: https://www.includehelp.com/code-snippets/the-word-break-property-in-css.aspx
[word break vs break all in CSS example]: https://www.includehelp.com/code-snippets/Images/break-word-vs-break-all.jpg
[https_ask.includehelp.com]: https://ask.includehelp.com/
[https_www.includehelp.com_code-snippets_difference-between-values-of-word-break-break-all-versus-break-word-in-css.aspx]: https://www.includehelp.com/code-snippets/difference-between-values-of-word-break-break-all-versus-break-word-in-css.aspx