Fixed word wrap issue

package.json

@@ -1,31 +1,29 @@
 {
- "name": "storybooks",
- "version": "1.0.0",
- "description": "App for creating public and private stories",
- "main": "app.js",
- "scripts": {
- "start": "cross-env NODE_ENV=production node app",
- "dev": "cross-env NODE_ENV=development nodemon app",
- "postinstall": "node ./scripts/post-install.js"
- },
- "author": "Brad Traversy",
- "license": "MIT",
- "dependencies": {
- "connect-mongo": "^3.2.0",
- "dotenv": "^8.2.0",
- "express": "^4.17.1",
- "express-handlebars": "^4.0.4",
- "express-session": "^1.17.1",
- "fs-extra": "^9.0.1",
- "method-override": "^3.0.0",
- "moment": "^2.27.0",
- "mongoose": "^5.9.19",
- "morgan": "^1.10.0",
- "passport": "^0.4.1",
- "passport-google-oauth20": "^2.0.0"
- },
- "devDependencies": {
- "cross-env": "^7.0.2",
- "nodemon": "^2.0.4"
- }
+ "name": "storybooks",
+ "version": "1.0.0",
+ "description": "App for creating public and private stories",
+ "main": "app.js",
+ "scripts": {
+ "start": "cross-env NODE_ENV=production node app",
+ "dev": "cross-env NODE_ENV=development nodemon app"
+ },
+ "author": "Brad Traversy",
+ "license": "MIT",
+ "dependencies": {
+ "connect-mongo": "^3.2.0",
+ "dotenv": "^8.2.0",
+ "express": "^4.17.1",
+ "express-handlebars": "^5.1.0",
+ "express-session": "^1.17.1",
+ "method-override": "^3.0.0",
+ "moment": "^2.27.0",
+ "mongoose": "^5.9.28",
+ "morgan": "^1.10.0",
+ "passport": "^0.4.1",
+ "passport-google-oauth20": "^2.0.0"
+ },
+ "devDependencies": {
+ "cross-env": "^7.0.2",
+ "nodemon": "^2.0.4"
+ }
 }

public/css/style.css

@@ -1,22 +1,27 @@
 p {
- margin: 10px 0 !important;
+ margin: 10px 0 !important;
 }
 
 .login-container {
- width: 400px;
- margin-top: 50px;
- text-align: center;
+ width: 400px;
+ margin-top: 50px;
+ text-align: center;
 }
 
 .fa-small {
- font-size: 16px !important;
+ font-size: 16px !important;
 }
 
 .btn-float {
- float: left;
- margin-right: 10px;
+ float: left;
+ margin-right: 10px;
 }
 
 .img-small {
- width: 180px;
+ width: 180px;
+}
+.wordWrap {
+ word-wrap: break-word !important;
+ width: 100% !important;
+ word-break: break-word !important;
 }

views/stories/index.hbs

@@ -8,7 +8,7 @@
  </div>
  <div class="card-content center-align">
  <h5>{{title}}</h5>
- <p>{{stripTags (truncate body 150)}}</p>
+ <p class="wordWrap">{{{stripTags (truncate body 150)}}}</p>
  <br>
  <div class="chip">
  <img src="{{user.image}}" alt="">

views/stories/show.hbs

@@ -6,7 +6,7 @@
  <div class="card story">
  <div class="card-content">
  <span class="card-title">{{formatDate date 'MMMM Do YYYY, h:mm:ss a'}}</span>
- {{{story.body}}}
+ <h5 class="wordWrap">{{{story.body}}}</h5>
  </div>
  </div>
  </div>