card name breaks

Author: maxchistt

src/Cards/AddCard.js

@@ -11,7 +11,8 @@ function useInputValue(defaultValue) {
       onChange: event => setValue(event.target.value)
     },
     clear: () => setValue(defaultValue),
-    value: () => value
+    value: () => value,
+    addBreak: () => setValue(value + "\n")
   }
 }
 
@@ -58,7 +59,10 @@ function AddCard({ onCreate, onDeleteAll }) {
             minRows={1}
             maxRows={3}
             maxLength="100"
-            onKeyPress={e => e.key === 'Enter' && onEnter(e)}
+            onKeyPress={e => {
+              e.key === "\n" && input.addBreak()
+              e.key === 'Enter' && onEnter(e)
+            }}
           />
         </div>
 

src/Cards/CardItem.js

@@ -25,7 +25,11 @@ function CardItem(props) {
             <div className="card" style={{ backgroundColor: bgColor }} >
 
                 <div className="card-body" onClick={() => setEditCard(index)} >
-                    <h5 className="card-title">{cardItem.name}</h5>
+                    <h5
+                        className="card-title"
+                        style={{ overflow: "hidden", display: "-webkit-box", WebkitLineClamp: String(lineClip / 2), WebkitBoxOrient: "vertical" }}
+                        dangerouslySetInnerHTML={createHTML(cardItem.name)}
+                    />
                     <p
                         className="card-text"
                         style={{ overflow: "hidden", display: "-webkit-box", WebkitLineClamp: String(lineClip), WebkitBoxOrient: "vertical" }}