html - 如何对长单词进行换行并保持普通单词不换行

Question

在下面的示例中，我需要将长单词换行，以便 story 保持原始 padding 和 width
word-break:break-all - 工作正常，但不想要的结果是 - 文本的其余部分被正确包装
例如 lorem 包裹在 l-orem 或 lore-m

上

如何对长单词进行换行并保持普通单词不换行？

.grid{
display:grid;
grid-template-columns:1fr 1fr;
}
.grida{
background:orange;
}
.story{
    padding:25px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;
}

<div class='grid'>
<div class='grida'></div>
<div class='gridb'>
<div class='story'>
<a href = "https://loremipsum.com">loremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsum</a>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
</div>
</div>
</div>

Answer 1

将word-break更改为break-word:

.grid{
display:grid;
grid-template-columns:1fr 1fr;
}
.grida{
background:orange;
}
.story{
    padding:25px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

<div class='grid'>
<div class='grida'></div>
<div class='gridb'>
<div class='story'>
<a href = "https://loremipsum.com">loremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsum</a>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
</div>
</div>
</div>