separate post title and content with hyphens

This commit is contained in:
Alina Beck 2019-09-02 16:46:41 +01:00
parent 3e5a624147
commit 0fd0cdbe34
5 changed files with 12 additions and 6 deletions

View File

@ -164,3 +164,9 @@ hr {
.v-popover.open .trigger a { .v-popover.open .trigger a {
color: $text-color-link-active; color: $text-color-link-active;
} }
.hyphenate-text {
hyphens: auto;
overflow-wrap: break-word;
word-wrap: break-word;
}

View File

@ -20,12 +20,12 @@
</div> </div>
<ds-space margin-bottom="small" /> <ds-space margin-bottom="small" />
<!-- Post Title --> <!-- Post Title -->
<ds-heading tag="h3" no-margin>{{ post.title }}</ds-heading> <ds-heading tag="h3" no-margin class="hyphenate-text">{{ post.title }}</ds-heading>
<ds-space margin-bottom="small" /> <ds-space margin-bottom="small" />
<!-- Post Content Excerpt --> <!-- Post Content Excerpt -->
<!-- eslint-disable vue/no-v-html --> <!-- eslint-disable vue/no-v-html -->
<!-- TODO: replace editor content with tiptap render view --> <!-- TODO: replace editor content with tiptap render view -->
<div class="hc-editor-content" v-html="excerpt" /> <div class="hc-editor-content hyphenate-text" v-html="excerpt" />
<!-- eslint-enable vue/no-v-html --> <!-- eslint-enable vue/no-v-html -->
<!-- Footer o the Post --> <!-- Footer o the Post -->
<template slot="footer"> <template slot="footer">

View File

@ -121,7 +121,7 @@
</div> </div>
</ds-container> </ds-container>
</div> </div>
<ds-container style="word-break: break-all"> <ds-container>
<div class="main-container"> <div class="main-container">
<nuxt /> <nuxt />
</div> </div>

View File

@ -18,9 +18,9 @@
/> />
</client-only> </client-only>
<ds-space margin-bottom="small" /> <ds-space margin-bottom="small" />
<ds-heading tag="h3" no-margin>{{ post.title }}</ds-heading> <ds-heading tag="h3" no-margin class="hyphenate-text">{{ post.title }}</ds-heading>
<ds-space margin-bottom="small" /> <ds-space margin-bottom="small" />
<content-viewer class="content" :content="post.content" /> <content-viewer class="content hyphenate-text" :content="post.content" />
<!-- eslint-enable vue/no-v-html --> <!-- eslint-enable vue/no-v-html -->
<ds-space margin="xx-large" /> <ds-space margin="xx-large" />
<!-- Categories --> <!-- Categories -->

View File

@ -72,7 +72,7 @@
<template v-if="user.about"> <template v-if="user.about">
<hr /> <hr />
<ds-space margin-top="small" margin-bottom="small"> <ds-space margin-top="small" margin-bottom="small">
<ds-text color="soft" size="small">{{ user.about }}</ds-text> <ds-text color="soft" size="small" class="hyphenate-text">{{ user.about }}</ds-text>
</ds-space> </ds-space>
</template> </template>
</ds-card> </ds-card>