如何使用 CSS 在框内和框外包装文本？

在本文中，我们将介绍如何使用 CSS 属性将文本包裹在框内外。

方法：我们将使用“ overflow-wrap ”属性。当内容的长度超过父组件长度时，该属性就会出现。 “ overflow-wrap ” 属性主要可以有五个值。

• 普通的
• 断词
• 继承
• 最初的
• 未设置

“正常”值将根据浏览器的正常换行规则换行。 “ inherit ”将继承父元素的属性。但我们正在寻找的价值是“断字”。

“ break-word”属性将打破超出父块或分区边界的任何字符串或单词，并尝试将内容放入提供新行的块中。

我们将给height和width属性固定值而不是auto ，因为 auto 根据内容长度增加宽度。

HTML代码：我们创建了一个类名为“ box ”的div ，负责给出固定的高度、宽度和溢出条件。在这个div框中，我们有 content < p>标签，它保存字符串值。

HTML

  

    
    
    
  
    

  

    

        

            try to read this word 
            chekolosvakialRegion
        
    

  

没有溢出条件的类框：如果对于类“框”，将上面使用的CSS更改为以下内容。

在上面，我们没有在类框中给出任何溢出条件，所以会遵循正常的行为，直到没有指定中断行是空格，它才会断行。在这种情况下，我们的内容将溢出框。

输出：

内容越界

带溢出条件的类框：如果用下面的代码修改上面的CSS。

在父块框上提供溢出条件后，我们就实现了对内容的自动换行。每当

标签内容试图超出边界时，我们的overflow-wrap: break-word 将打破“chekolosvakialRegion”这个词并试图适应盒子。

输出：

溢出包装：断字

我们已经使用 CSS 属性成功地将内容包装在盒子内外。