css word-wrap_CSS中分词“ break-all”和“ break-word”的值之间的差异
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中被稱為斷字,但我們將不討論斷字屬性,而是將重點放在斷字屬性的值上,即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>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://www.includehelp.com/code-snippets/difference-between-values-of-word-break-break-all-versus-break-word-in-css.aspx
css word-wrap
總結
以上是生活随笔為你收集整理的css word-wrap_CSS中分词“ break-all”和“ break-word”的值之间的差异的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 我们可以覆盖Java中的main()方法
- 下一篇: css圆在中心根据宽度缩放_根据CSS中