在CSS中一次包装2行 [英] Wrapping 2 lines at at time in CSS

问题描述

我已经考虑过这一点，虽然我不确定如何使用JS，但我不确定使用纯CSS解决方案是否可行.

I have thought about this and I'm not sure if it's possible with a CSS only solution, although I'm not even sure how I'd do it with JS.

给出如下文字:

123456789012345678901234567890
This is a whole bunch of words
123456789012345678901234567890
Yes it is yes it is oh yes....

并且屏幕非常狭窄，只能容纳前20个字符.如何包装文字，使其显示如下:

And having a screen so narrow that only the first 20 chars can fit. How can I wrap the text so that it displays like this:

1234567890123456789
This is a whole bun
01234567890
ch of words
12345678901234567890
Yes it is yes it is 
1234567890
oh yes....

也就是说，一次包装2行.典型的包装规则会给我错误的结果:

That is, wrapping 2 lines at a time. Typical wrapping rules will give me the wrong result:

1234567890123456789
01234567890
This is a whole bun
ch of words
1234567890123456789
01234567890
Yes it is yes it is
 oh yes....

推荐答案

将文本彼此放在上方并使用大行高可以达到以下效果:

Placing the texts above each other and using a big line-height can approximate this:

.box {
  position: relative;
  font-size: 1.2em;
  line-height: 2.4em; /* twice the font-size*/
  padding-top: 1.2em; /* equal to font-size*/
  font-family: monospace;
  
  /* to illustrate */
  overflow: hidden;
  border: 1px solid;
  resize: horizontal;
  word-break: break-all; /* omit this to keep full words */
}

.box div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  word-break: break-all;
}

<div class="box">
  <div>123456789012345678901234567890123456789012345678901234567890</div>
  This is a whole bunch of words Yes it is yes it is oh yes....
</div>

这篇关于在CSS中一次包装2行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！