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 {
color: $text-color-link-active;
}
.hyphenate-text {
hyphens: auto;
overflow-wrap: break-word;
word-wrap: break-word;
}

View File

@ -20,12 +20,12 @@
</div>
<ds-space margin-bottom="small" />
<!-- 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" />
<!-- Post Content Excerpt -->
<!-- eslint-disable vue/no-v-html -->
<!-- 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 -->
<!-- Footer o the Post -->
<template slot="footer">

View File

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

View File

@ -18,9 +18,9 @@
/>
</client-only>
<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" />
<content-viewer class="content" :content="post.content" />
<content-viewer class="content hyphenate-text" :content="post.content" />
<!-- eslint-enable vue/no-v-html -->
<ds-space margin="xx-large" />
<!-- Categories -->

View File

@ -72,7 +72,7 @@
<template v-if="user.about">
<hr />
<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>
</template>
</ds-card>