0

How can I put a gap in the middle of a paragraph of justified text like in the image? The text would not wrap to the next line within a column, instead it continues from the left to right side of the gap. The text is justified on the left and right sides across the entire paragraph and before and after the gap.

sample

Sample html:

<div>
  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
</div>

I am open to javascript as a solution. I tried using 2 divs with text-align: justify. Once I overflow a line, I remove that last word. This works until the second line because let's say you end the right paragraph with George Washington. Washington overflows, so you end the line with George. Then you continue on the next line and end the left paragraph "Washington was a very, very, very, very good boy" then continue on the right but the short words can now wrap up to line one. So you end up with "George very". If the browser did text-align: justify on a single line, the issue would be solved.

tim
  • 1,371
  • 3
  • 19
  • 30
  • I think you will need JavaScript. Is that acceptable? – A Haworth Dec 24 '22 at 09:32
  • This answer may help https://stackoverflow.com/questions/28350512/wrapping-text-around-a-circle-with-css – strawberrymilk Dec 26 '22 at 04:51
  • Thanks for putting the JS attempt explanation up. I think you are on the right lines, but perhaps we should stick to putting all the text, justified, in just one div (not the final div obviously) and copying the characters across to the two live ones(the left one and the right one). My problem with that though is that it makes the text inaccessible to screen readers so I'm still pondering whether we can somehow create a gap rather than two divs. – A Haworth Dec 30 '22 at 18:02

1 Answers1

0

You need learn about display: flex; and justify-content

   <div class="contianer">
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    

    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
</div>
    <style type="text/css">
        .contianer{
            display: flex ;
            height: 300px;
            width: 100%;
            border: 1px solid red;
            justify-content: space-evenly;
            align-items: center;
        }

        .contianer > div{
            width: 40%;
            height: 50%;
            border: 1px solid red;

        }
    </style>
albert
  • 16
  • 2
  • This does not do what is required by the quesstion. It justifies two independent texts The requiement is to split one text. Please look carefully at the image given in the question. – A Haworth Dec 26 '22 at 08:33
  • 1
    @tatactic this is an unnecessary comment. No reason to attack another user like that. – disinfor Dec 30 '22 at 15:28