当前位置: 首页 > 面试题库 >

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

储俊英
2023-03-14
问题内容

我正在建立一个多语言站点,所有者正在帮助我进行一些翻译。一些显示的短语需要换行以保持网站的风格。

不幸的是,所有者不是计算机专家,所以如果他看到他foo<br />bar有机会在翻译时以某种方式修改数据

是否有CSS解决方案(除了更改宽度)适用于在每个单词之后都会中断的元素?

(我知道我可以用PHP做到这一点,但我想知道是否有一个我不知道的CSS技巧可以完成同一件事,也许是在CJK功能中。)

编辑

我将尝试说明发生的情况:

----------------          ----------------
| 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,因为它也支持单词间距)。



 类似资料:
  • 问题内容: 我还没有看到任何文档说jQuery可以更改任何CSS定义,例如更改 至 但要么必须更改整个样式表,要么更改每个元素的类,或者更改每个元素的css。 可以更改样式定义吗? 问题答案: 可以通过DOM访问样式表,但这是我们倾向于避免的事情之一,因为IE需要大量的兼容性问题。 更好的方法通常是使用祖先的简单类更改来间接触发更改: 现在,所有s都会更新。 如果您确实必须修改样式表,请执行以下操

  • 问题内容: 在这部分代码中: System.out.println的示例结果是: [A B C D] 如果我想要下面的结果,该如何修改上面的代码? 一个 b C d 或至少: 一个, b, C, d 问题答案: 遍历元素,分别打印每个元素。 另外,Java 8语法提供了一个很好的捷径,可以通过方法引用来完成相同的操作 或lambda

  • 问题内容: 例如,是否可以选择一组元素中的每个第四个元素? 例如:我有16个元素…我可以写类似的东西。 有一个更好的方法吗? 问题答案: 顾名思义,它允许您使用除常数以外的变量构造算术表达式。您可以执行加法(),减法()和系数乘法(其中是整数,包括正数,负数和零)。 这是重写上面的选择器列表的方法: 有关这些算术表达式如何工作的解释,请参见我对该问题的回答以及规范。 请注意,此答案假设同一父元素内

  • 问题内容: 目标:从所有行内的定位标记中提取文本并将其放入csv中。 我正在尝试以下代码: 它工作正常,但csv中的每个单元格仅包含一个字符。 像这样: 代替: 我当然想念什么。但是呢 问题答案: 接受一个序列。您只给它一个字符串,因此将其视为一个序列,字符串的作用类似于字符序列。 您还要在此行中还有什么?没有?如果是这样,请使其成为一项的列表: (顺便说一句,由于您已经加入了Unicode分隔符

  • 本文向大家介绍使用CSS为其父元素的第一个子元素的每个 元素设置样式,包括了使用CSS为其父元素的第一个子元素的每个 元素设置样式的使用技巧和注意事项,需要的朋友参考一下 要设置作为其父级第一个子级的每个<p>元素的样式,请使用CSS:first-child选择器。 示例 您可以尝试运行以下代码来实现:first-child选择器-

  • 我的任务是设计一个有人为我们制作的倒计时,但棘手的部分是它是在一个跨度内呈现的,如下所示: 我不能真的改变倒计时代码,他们希望我创建边框和背景的每一组数字在倒计时,像下面的图像。 有没有什么方法可以用纯CSS来实现呢?