首页 / 技术问答 / Css问答列表 / 问答详情

CSS可以在元素中的每个单词之后强制换行吗

我正在建设一个多语种的网站，业主帮助我进行一些翻译.某些显示的短语需要换行符才能保持网站的风格.

不幸的是，店主不是电脑爱好者，所以如果他看到foo<br />bar，他就有可能在翻译时以某种方式修改数据.

是否有CSS解决方案(除了更改宽度)应用于每个单词后都会断开的元素？

(我知道我可以在PHP中做到这一点，但我想知道在CSS中是否有我不知道的妙招来完成同样的事情，可能是在CJK特性中.)

EDIT个

我会try 用图表说明正在发生的事情:

----------------          ----------------
| Short Word   |          | Gargantuan   |
|              |          | Word         |
----------------          ----------------

长词会自动断开，而短词不会.我希望它看起来是这样的:

----------------          ----------------
| Short        |          | Gargantuan   |
| Word         |          | Word         |
----------------          ----------------

推荐答案

使用

.one-word-per-line {
    word-spacing: <parent-width>; 
}

.your-classname{
    width: min-intrinsic;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    display: table-caption;
    display: -ms-grid;
    -ms-grid-columns: min-content;
}

其中<parent-width>是父元素的宽度(或不适合一行的任意高值).这样你就可以确保在一封信后甚至有一个换行符.与Chrome/FF/Opera/IE7+配合使用(甚至可能是IE6，因为它也支持字间距).

Css相关问答推荐

CSS动画与不正确的时间比率

在Powershell中使用正则表达式编辑css文件

臭虫？嵌套的css供应商前缀中断Chrome css解析

为什么在RadixUi上应用Tailwincss和自定义css类不起作用？

为什么CSS flex似乎应用了两次内部元素的填充？

在最小和最大视口之间时具有固定值的 CSS 钳位

如何为 React Native switch 组件创建标签？

如何在悬停另一个部分的元素时使元素可见？

使元素在顶部和中心都有粘性

Nativewind 的某些样式不适用于本机 (Android)，但它们适用于网络

如何应用适当样式的元素加消息框？

AngularJS Graphs & Charts - 实线和虚线的混合

为什么我们将