如何修复css列上溢出的段落标签？

Question

I have to make a responsive text that looks like a book. It means that the texts has to be in the same place doesn't matter how big screen is. I'm trying to use columns, but I can't even make the p tag stay inside screen.

 .page { background-color: #fff; width: 100%; height: 141.43vw; margin-bottom: 10px; overflow: hidden; } .text-column { text-align: justify; column-count: 2; }

 <section class="page text-column"> <article> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio eos placeat aliquid rem neque maxime animi repellat in molestias quos asperiores odit reprehenderit eaque quod commodi, esse mollitia dolor quidem. </p> </article> </section>

edit: added img

Answer 1

Can you please try with "column-count: 2;" to 'p', because you can not directly apply this css to super parent of the desired element.

 .page { background-color: #fff; width: 100%; height: 141.43vw; margin-bottom: 10px; overflow: hidden; } .text-column p { text-align: justify; column-count: 2; }

 <section class="page text-column"> <article> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio eos placeat aliquid rem neque maxime animi repellat in molestias quos asperiores odit reprehenderit eaque quod commodi, esse mollitia dolor quidem. </p> </article> </section>

Answer 2

只需将此添加到您的“p”标签 CSS：

column-count: 2;

Answer 3

Normally, to keep the text in the same position no matter what is the device used you need the keep the text size in place and the column width to have an absolute width , rather than a relative one.

Assuming that the font size is always the same, you can apply - as the user above said - the column-count: 2; to the .text-column p and also set a width: 800px; .

You will have to make the paragraph responsive for devices where the resolution is smaller than 800px. Usually, most devices have a screen size wider than 400px(half of the initial size, but 1 column now).

The only problem is that whenever the screen width falls below 800px, the paragraph width will instantly transform to a 400px width one. The following code will get this result:

.page {
      background-color: white;
      width: 100%;
      height: 141.43vw;
      margin-bottom: 10px;
      overflow: hidden;
}

.text-column p {
  margin-top: 0px;
  padding: 10px;
  column-count: 2;
  width: 800px;
}

@media only screen and (max-width: 800px) {
  .text-column p {
  column-count: 1;
  width: 400px;
}
}

As I said below, keeping the position of the words exactly the same in a phrase or the page content unchanged no matter the device requires absolute sizes . The previously mentioned solution works when the page number is not too relevant.