Fix next-prev navigator for large title (#258)

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

2 files changed, 8 insertions, 6 deletions

diff --git a/layouts/partials/navigators/next-prev-navigator.html b/layouts/partials/navigators/next-prev-navigator.html
index da50a52..39590cc 100644
--- a/layouts/partials/navigators/next-prev-navigator.html
+++ b/layouts/partials/navigators/next-prev-navigator.html
@@ -6,9 +6,8 @@
       {{ if (in site.Params.mainSections .Next.Type) }}
       <div class="col-md-6 previous-article">
         <a href="{{.Next.RelPermalink}}" class="btn btn-outline-info">
-          <span><i class="fas fa-chevron-circle-left"></i> {{ i18n "prev" }}</span>
-          <br />
-          <span>{{ .Next.Title }}</span>
+          <div><i class="fas fa-chevron-circle-left"></i> {{ i18n "prev" }}</div>
+          <div class="next-prev-text">{{ .Next.Title }}</div>
         </a>
       </div>
       {{ end }}
@@ -23,9 +22,8 @@
         {{ end}}
         <div class="{{ $columnWidth }} next-article">
           <a href="{{ .Prev.RelPermalink }}" class="btn btn-outline-info">
-            <span>{{ i18n "next" }} <i class="fas fa-chevron-circle-right"></i></span>
-            <br />
-            <span>{{ .Prev.Title }}</span>
+            <div>{{ i18n "next" }} <i class="fas fa-chevron-circle-right"></i></div>
+            <div class="next-prev-text">{{ .Prev.Title }}</div>
           </a>
         </div>
       {{ end }}
diff --git a/static/css/layouts/single.css b/static/css/layouts/single.css
index 4607087..a72e93a 100644
--- a/static/css/layouts/single.css
+++ b/static/css/layouts/single.css
@@ -295,6 +295,10 @@ mark {
   transition: all 0.3s ease-out;
 }
 
+.next-prev-navigator .next-prev-text{
+  white-space: break-spaces;
+}
+
 .next-prev-navigator .btn-outline-info:hover {
   color: #3c4858 !important;
   background-color: #e5e9f2 !important;