![[流泪]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_6.dde0d83.png)
他的梦_往来客谁能买单
摸鱼爱好者
|
摸鱼办
一个贪财好色却一身正气，嗜好很多却能力有限的凡夫俗子！
获得徽章 11
- 如果元素宽度不够时，如何使得长串单词不会被截断？
"在处理元素宽度不足以容纳长串单词时，确保长单词不被截断的方法是使用CSS属性`word-wrap`或`overflow-wrap`，这两者的效果类似，都可以处理长单词的换行问题。
1. **使用`word-wrap`属性**：
设置`word-wrap: break-word;`可以在单词内部的任意位置进行换行，避免截断长单词。这个属性在CSS3中引入，用于控制是否允许单词内换行。
```css
.long-word {
word-wrap: break-word;
}
```
2. **使用`overflow-wrap`属性**：
`overflow-wrap: break-word;`是`word-wrap`的替代属性，它也能实现同样的效果。它在CSS3中被引入，作为`word-wrap`的标准化版本，可以用来处理同样的换行问题。
```css
.long-word {
overflow-wrap: break-word;
}
```
这两个属性都能确保即使在元素宽度有限的情况下，长串单词也能在必要时换行，而不是被截断显示。它们在处理响应式设计和移动设备布局时尤为有用，可以保持文本的可读性和布局的整洁性。"展开评论1
![[撇嘴]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_14.8130d96.png)
![[绝望的凝视]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_69.cabd864.png)