Question 277315 in CSS Question posted in
Some basic documentation can be found here.

Css – How to display a translated string on two rows

I have to make a simple react component which displays a translated string on two rows, second row must start always with the third word.

example:

<div className="parent">
  <p>{t('myText')}</p>
</div>

myText value from the translation file is = "Text that I want to display"

I tried using this "Text that n I want to display" but didn’t work.

which would be the best and the simplest way to solve this?

Tags:

2

Answers


  1. 0

    Use p tag it separated blocks by blank lines

    <div className="parent">
  <p>Text1</p>
  <p>Text1</p>
</div>
    Login or Signup to reply.
  2. 0

    As per your question, you need code in react.js. Here is a component code.

    import React from 'react';

function TwoRowText(props) {
    const { text } = props;
    
    // Split the string on spaces
    const words = text.split(' ');

    // Make sure there are at least three words
    if (words.length < 3) {
        return <div className="parent">{text}</div>;
    }

    // Join the first two words and then the rest
    const firstRow = words.slice(0, 2).join(' ');
    const secondRow = words.slice(2).join(' ');

    return (
        <div className="parent">
            <div>{firstRow}</div>
            <div>{secondRow}</div>
        </div>
    );
}

export default TwoRowText;

    Jsx file code

    <TwoRowText text={t('myText')} />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search