极客笔记CSS 如何防止长单词打破我的div
有时，开发人员需要在网页上显示长单词。例如，显示URL、长文件名等。有时，单词长度大于父容器的长度，导致单词溢出容器。
例如，我们创建了一个卡片来显示文件详情，文件名非常长，这可能会打破卡片的布局，看起来不太好。因此，开发人员需要通过换行来防止长单词打破div元素。
在开始解决方案之前，让我们通过示例来理解问题。
示例1（长单词打破div）
在下面的示例中，我们创建了一个div元素并在其中添加了一个‘p’元素。此外，我们在‘p’元素的文本中添加了长单词。
在CSS中，我们设置了div元素的固定尺寸。在输出结果中，用户可以观察到长单词打破div元素并溢出。
<html>
<head>
<style>
.container {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
font-size: 1.5rem;
}
</style>
</head>
<body>
<h2> Long words breaking the div in HTML5 </h2>
<div class = "container">
<p class = "long-word"> This is a longwordthatshouldnotbreakinsideadiv. </p>
</div>
</body>
</html>
使用Word-break CSS属性来断开单词
在这种方法中，我们将使用”word-break” CSS属性来防止单词在div元素中断开。”word-break”属性允许我们决定当单词超过容器宽度时如何断开。
它可以取不同的值来断开单词。”normal”值只在指定的断点处（如空格、连字符等）断开单词。”break-all”值从超出容器的任意字符处断开单词，”keep-all”值则不会断开单词。
在这里，我们将使用”break-all”值从任意字符处断开单词。
语法
用户可以按照以下语法使用”word-break” CSS属性来防止长单词在div元素中断开。
word-break: break-all;
示例2（防止长单词打破div）
在下面的示例中，我们在容器div元素中添加了长单词，这是我们在第一个示例中添加的。在CSS中，我们使用了”word-break”属性和”break-all”值来防止单词打破div元素。
在输出中，我们可以观察到单词从一个特定字符处断开，将单词的剩余字符显示在下一行。
<html>
<head>
<style>
.container {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
font-size: 1.5rem;
}
.long-word {
word-break: break-all;
}
</style>
</head>
<body>
<h2> Preventing the long words breaking the div in HTML5
</h2>
<div class = "container">
<p class = "long-word"> This is a longwordthatshouldnotbreakinsideadiv.</p>
</div>
</body>
</html>
使用overflow-wrap属性
使用overflow-wrap属性，我们可以决定如果元素的内容溢出父元素，应该如何换行。我们可以使用overflow-wrap属性的break-word值，通过将长单词包裹起来来防止其破坏div元素。
语法
用户可以按照以下语法使用overflow-wrap CSS属性来换行长单词。
overflow-wrap: break-word;
示例3
在以下示例中，我们将非常长的单词添加为“p”元素的文本。然后，我们使用父元素的‘overflow-wrap’属性将溢出的内容换行到下一行并分割单词。
在输出中，我们可以看到该单词从中间被分割，并在下一行显示剩余字符。
<html>
<head>
<style>
.container {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
overflow-wrap: break-word;
}
</style>
</head>
<body>
<h3> Preventing the long words breaking the div in HTML5 using the overflow-wrap property
</h3>
<div class = "container">
<p class = "long-word"> Thisisaverylongwordthatshouldnotbreakinsideadiv. </p>
</div>
</body>
</html>
示例4（使用JavaScript设置overflow-wrap属性）
有时，我们需要使用JavaScript防止长单词打破div。例如，我们从数据库获取产品数据，如果产品名称非常长，我们可以使用“overflow-wrap”属性来包装长的产品名称。
在JavaScript中，我们可以访问HTML元素并使用style对象的“overflowWrap”属性来防止长单词打破div元素。
<html>
<head>
<style>
.container {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<h3> Preventing the long words breaking the div in HTML5 using the <i>overflow-wrap</i> property
</h2>
<div class = "container">
<p class = "long-word"> Thisisaverylongwordthatshouldnotbreakinsideadiv. </p>
</div>
<script>
let longWord = document.querySelector('.long-word');
longWord.style.overflowWrap = 'break-word';
</script>
</body>
</html>
用户学会使用不同的CSS属性来防止长单词打破div元素。我们在第一种方法中使用了“word-break”CSS属性，指定了浏览器如何打破单词。在第二种方法中，我们使用了“overflow-wrap”CSS属性，指定了如何处理div元素内容的溢出。