文字换行自动添加换行符“-”

1.前言

英文模式下,容器宽度不够单词会自动换行,看着很不舒服。

2.实现方式

给需要换行自动添加换行符的文字添加样式

复制代码
.msg-text{
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    word-break: break-word;
}

介绍: 1.使用 CSS 的 hyphens: auto 属性(包含浏览器前缀),让单词在换行时自动添加连字符。

2.使用 word-break: break-word 确保长单词可以正确换行

3.结束语

制作不易,点个赞是给我最大的鼓励!!!

相关推荐
颂love7 分钟前
Vue的两大生态以及组件通信
前端·javascript·vue.js·typescript
甜汤圆10 分钟前
Python 里**自定义数据单元**
前端
cidy_9817 分钟前
将 Figma 接入 Codex MCP:从 `/plugins` 到本地插件配置的完整教程
前端
vivo互联网技术18 分钟前
动效开发不踩坑:几种动效实现方案对比与实战选型
前端·性能优化·动效
Csvn20 分钟前
【Vue3】Composition API vs Options API —— 什么场景该选哪个
前端
Csvn21 分钟前
Vue3 迁移血泪史:v-model 的 .sync 陷阱,90% 升级项目都会踩
前端·vue.js
光影少年22 分钟前
js单线程,为什在node环境下的js可以处理高并发请求?
前端·javascript·掘金·金石计划
vim怎么退出35 分钟前
Dive into React——事件系统
前端·react.js·源码阅读
moMo37 分钟前
# JavaScript 的“等等我”:聊聊同步与异步
javascript
KaMeidebaby38 分钟前
卡梅德生物技术快报|重组蛋白的表达和纯化:工艺调试全记录:大肠杆菌体系重组蛋白的表达和纯化参数标定(肠激酶轻链案例)
前端·人工智能·算法·数据挖掘·数据分析