Article From:

<div style=”width:200px;height:20px;border:1px solid red;display: flex;”>

CanvasAn example of drawing arcs


Code as above, tried space-between seems to be effective only for containers, seeking bigwigs, it is best not to change the source code. Is there any alternative?

Answer 0:

You can use text-align: justify, but justify will also have problems. See the link description.


Because text-align does not deal with interrupted rows and last lines. Because your text occupies only one line, so it is the last line, so text-align set to justify will not produce any effect.The solution is to use text-align-last, and set it to justify.Unfortunately, text-align-last is not supported by all browsers.So for those who do not support text-align-last, you can manually generate two lines of text in the last row, and then second.If the line is hidden, then the first line of reality will be able to achieve alignment at both ends.And your span is inline-block, and you can set the width (100%). Then this time the inline box is wider than the line box, and the browser will dismantle it into two lines, naturally first.The text-align effect of the line text is effective. Your implementation is just good. It is the second implementation method above.

Answer 1:

Need the text at both ends to be aligned? At both ends of the text is text-align:justify?

Answer 2:

<div style=”width:200px;height:20px;border:1px solid red;display: flex;justify-content:space-between”><span>CanvasDraw arc < /span> < span> introductory example < /span> < /div>
To achieve this effect?

Leave a Reply

Your email address will not be published. Required fields are marked *