score:2
if you want "\n" to work you need to add css property style={{whitespace: "pre-line"}}
function reactapp(){
const text = "complete tasks faster than ever before.\n with our platform, it only takes minutes."
return (
<div style={{whitespace: "pre-line"}} >{text}</div>
)
}
score:0
i suggest solving this using styling, not content-driven. if you reduce the width of your div
element, the text will break by default.
score:0
split them up into separate <p>
tags, or put a <br>
tag in between the,.
score:0
the best approach would be to put the text into separate containers (e.g divs).
eventually, you can try to use the white-space: pre-line
property.
e.g
.break-line {
white-space: pre-line;
}
and then in render do such:
render() {
return <div classname="break-line">complete tasks faster than ever before. \n with our platform, it only takes minutes</div>
}
it should do the job. in case of any questions don't hesitate to ask! you can read more about the white-space property here: https://developer.mozilla.org/en-us/docs/web/css/white-space
score:0
wrap your text in span like :
<span>your text</span><br>
<span>next text</span>
score:1
you can add the <br />
html tag if it's possible
Source: stackoverflow.com
Related Query
- Trying to break the text in 2 line with React
- How to get the text to be in alignment after a line break in react js
- Updating a React Input text field with the value on onBlur event
- Show only the 1st line of text in React Native
- Trying to deploy my React app with gh-pages but got this error message : The "file" argument must be of type string. Received type undefined
- Center a text in the screen with react native
- How to implement componentDidMount with hooks in React to be in line with the EsLint rule "react-hooks/exhaustive-deps": "warn"?
- Error: Unable to find an element with the text when I try a test with Jest in React
- How to limit the text filed length with input type number in React JS and prevent entry of E,e, -, + etc
- Force a line break inside the button's text when using small screens
- Getting an error trying to start React right after (There might be a problem with the project dependency tree....)
- trying to add br tag between the text in react
- React: Trying to rewrite ComponentDidUpdate(prevProps) with react hook useEffect, but it fires when the app starts
- React Js: prevent line breaks or submit on enter in the text area
- Trying to integrate jest and react with amchart but getting an error . What could be the issue?
- Add a line break into the long string in <li> React
- Using Styled Components with nested styles for React Search Bar, trying to place two different SVGs at opposite sides of the search bar
- I want to align the LearnMoreButton text next to h4 text. With the existing, the learn more shows in next line
- I am trying to animate an object with css in react and change the animation (timing) dynamically, how can I set the style after animation end?
- The issue with drawing straight line and rectangle in Konvajs React
- React js - Updating state with array values and a line break
- Trying to change the text using onclick in React JS
- How to add text on the last element of a map with react
- A blinking text with React using the CSS property visibility
- React js truncate text with ellipsis in the middle
- How to render multi line text with return characters in React component?
- react loop through array of strings with delay and set the text value
- unexpected end of data at line 1 column 1 of the JSON data in express with React
- JSX question with ahref tags. Different text input int the backend and need it to render on the react front end as a hyperlink
- Align text with previous text after a line break
More Query from same tag
- Removing extra space when expansion-panel opens in material-ui
- React Router Dom child routes
- React how to build the react page only after the script is finished running
- React infinite update loop with useCallback (react-hooks/exhaustive-deps)
- axios.put save as a string
- React.js how to call child component method without using refs?
- react routing and django url conflict
- How to access data from redux store
- React form validation hook causes infinite re-render loop
- How to handle desktop vs mobile layout for a component when the mobile design is VERY different (aka cannot make use of grid layout)?
- Unable to mount the component in react class based components
- Remove the display flex property from the MuiCollapse-wrapper
- How to combine multiple API requests in one function with fetch() in React
- How to stop jest updateSnapshot from replacing `<Measure` to `<_class`
- How to reset input field from useRef in React?
- How to handle the render of a large list of items in react?
- Bind method to react state changes
- Page wont refresh when using React Link and passing state
- Missing required parameter To in the post body in react js axios using spring boot Twilio Api
- What should I use to make API requests to my node back end from my React front end?
- Material UI remove the yellow background on TextField autofill
- Axios call gives infinite loop
- Exclude results from array that contains ONLY the sent query. MongoDB
- How can get intl.formatMessage from parent component?
- Nextjs typescript filtering table with checkboxes
- Cannot update an element in an object in ReactJS
- How to test components being rendered when the redux store is changed?
- Testing Redux Enzyme: Component doesn't re-render after state has changed
- React addons update() with $splice - how to insert an object into an array of objects?
- Error: 'Uncaught SyntaxError: Unexpected token <' (Django + React + Webpack)