如何强制所有溢出一行的字包到下一行？

问题描述 投票：0回答：1

我的文档宽度设置为 100vw 并对视口大小的变化做出反应。

嗯，几乎是这样。有些单词会溢出，但不会被推送到下一行。这就会产生一个小的水平滚动。

enter image description here

当略微缩小浏览器的宽度时，单词(tremit)被推到下一行。

在我看来，wrapping这个词是有一定的权重的，比如说 "在这个溢出的地方，把这个词放在行上，如果在上面，就把它包起来".

第一个问题：这个假设是否正确？

如果是的话。有没有一种方法可以将权重降为零, 也就是每当一个词溢出时, 就强制将其包裹起来?

我以为 overflow-wrap: anywhere; 将是解决方案，但将其添加到 <body> 并没有改变任何东西。

body {
    margin: 0;
    font-family: 'Quicksand', sans-serif;
    font-size: 150%;
    width: 100vw;
    overflow-wrap: anywhere;
}
html css overflow word-wrap
1个回答
0
投票

我猜，你误解了你所面临的问题。字词包装并没有错，但是user-agent会在正文中添加一些默认的边距。大多数情况下，我们不会直接将文本添加到 body. 所以我去掉了默认的margin，增加了padding。请检查我的示例代码。我猜字的包装是自然发生的&amp；没有水平滚动。演示 此处.

*{
box-sizing:border-box;
}

body{
width:100%;
margin:0;
padding:8px;
}
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.