How do I add invisible space in caption so text is in two lines React-CodePudding

I am trying to make it so the caption for the React web app is the same as Figma design. How do I add a break or invisible character between "we make it simple" and "to create software" so that it looks like this Figma design?

CodePudding user response：

The quickfix and not recommended solution is:

we make it simple <br /> to create software

The best practice is:

.d-flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

<div >
    <div>we make it simple</div>
    <div>to create software</div>
</div>

CodePudding user response：

We may consider your caption as flow-content (a sentence) consisting of two phrases (two lines).

Additionally, since your caption is one thematic group (your catch-phrase), we should wrap it in a  element. It does not appear to be a heading, so it should not be wrapped in a heading element.

As for how to separate the two phrases: The naive approach would be to use  , but this should only be used where a line break is part of the content.

The only appropriate use of   to break lines where the line break is not part of the content is to add aria-hidden="true" to it.

Another way to separate them would be to use <pre>, but this is neither responsive nor fluid, so it would break for narrow widths. Its ARIA role is generic, but we already determined earlier that we should use paragraph.

So the recommended approach (or so I presume) would be to create a line break with generic elements, while wrapping the sentence in a  element.

There are several approaches to this, e.g. creating a line break with a pseudo-element, or by wrapping certain parts in generic elements.

This article creates a line break as , and claims it to be working with VoiceOver if  has role="text", even though role="text" is not defined in the specification.

Sidenote: Pseudo-elements—and therefore line breaks therein—are not part of the document, so their content won't be copied. Consider this while chosing an approach.

The advantages of using  and generic elements are:

It is simple,
specification-compliant, and
semantically correct so it should be accessible (hopefully).

Here's an example of wrapping the desired lines in generic elements:

.line {display: block}

<p>
  <span >We make it simple</span>
  <span >to write software.</span>
</p>