text going off the page in vue.js component

Question

I'm making a "reddit clone" and currently my text isn't wrapping, I'm not really sure why as when the title extends, it takes a new line, but not for post.postMarkdown. Here is my template.

<template>
  <div class="home">
    <div class="columns">
      <div class="column is-three-quarters">
        <p class="title">
          {{ post.postTitle }}
        </p>
        <p>
          <i>Posted by <a>{{ post.username }}</a></i>
        </p>
      </div>
      <div class="column is-one-quarter right">
        <b-button type="is-primary" class="back" @click="backToSubforum">Back to {{ this.$store.state.subforum }}</b-button><br />
        <b-button type="is-primary" class="back" @click="backToForum">Back to forums</b-button>
      </div>
    </div>
    
    <p>{{ post.postMarkdown }}</p>
    
    <hr />
    <!--
      TODO: Comments
      -->
  </div>
</template>

Here is an example of a post where this happens

score 2 · Accepted Answer · answered Nov 08 '20 at 23:11

You need to use word-wrap: break-word, this breaks unspaced words.

/* just place on global p {} */
p.word-wrap {
  word-wrap: break-word
}

p.word-wrap-not {
  word-wrap: unset
}

<p class="word-wrap">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>

<p class="word-wrap-not">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>

score 0 · Answer 2 · answered Nov 08 '20 at 22:39

0

The p containing the post content should have a max width:

 <p class="container is-max-desktop">{{ post.postMarkdown }}</p>

answered Nov 08 '20 at 22:39

Boussadjra Brahim

82,684
19
144
164

csdev · Answer 3 · 2020-11-08T22:55:02.137

This can be solved any number of ways through css. You could style your paragraphs (p tags), or add a css class to that specific paragraph for post content, as you have elsewhere, so

 <p class="post-content">{{ post.postMarkdown }}</p>

Set a width, text wrapping - or directly enter a style like

<p style="max-width:250px">{{ post.postMarkdown }}</p>

It would be helpful to see what css styles are in place, if any, in addition to your html, if this suggestion doesn't fix the issue.

text going off the page in vue.js component

3 Answers3