add WordWrap and wrap question content in this component

src/features/QualificationPage/features/TestPage/components/Test/Question.tsx

@@ -7,6 +7,7 @@ import Image from 'next/image';
 import { makeStyles } from '@material-ui/core/styles';
 import { Typography, Button } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
+import WordWrap from './WordWrap';
 import ImageWrapper from './ImageWrapper';
 
 export interface QuestionProps {
@@ -35,7 +36,7 @@ const Question = ({
         {question.content.split('\n').map(fragment => {
           return (
             <Fragment key={fragment}>
-              {fragment}
+              <WordWrap>{fragment}</WordWrap>
               <br />
             </Fragment>
           );

src/features/QualificationPage/features/TestPage/components/Test/WordWrap.tsx

@@ -0,0 +1,25 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+interface Props {
+  children?: React.ReactNode;
+}
+
+const WordWrap = ({ children }: Props) => {
+  const classes = useStyles();
+  return <span className={classes.wordWrap}>{children}</span>;
+};
+
+const useStyles = makeStyles(() => ({
+  wordWrap: {
+    overflowWrap: 'break-word',
+    wordWrap: 'break-word',
+    '-ms-word-break': 'break-all',
+    wordBreak: 'break-word',
+    '-ms-hyphens': 'auto',
+    '-moz-hyphens': 'auto',
+    '-webkit-hyphens': 'auto',
+    hyphens: 'auto',
+  },
+}));
+
+export default WordWrap;