Html vue.js组件中离开页面的文本

我正在制作一个“reddit克隆”，目前我的文本没有包装，我不确定为什么当标题扩展时，它会换行，但不是用于

post.postMarkdown

。这是我的模板

<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>

{{post.postTitle}


发布人
包含发布内容的
p
应具有最大宽度：

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

{{post.postMarkdown}
这可以通过css以多种方式解决。您可以为您的段落（p标签）设置样式，或者像在其他地方一样，为特定段落添加一个css类，以便发布内容

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

{{post.postMarkdown}

设置宽度、文字换行或直接输入样式，如

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

{{post.postMarkdown}

如果这个建议不能解决这个问题，那么看看除了html之外还有什么css样式（如果有的话）是很有帮助的。
您需要使用
word wrap:break word
，这会打断未加空格的单词


/*只需放置在全局p{}*/
p、 换行{
换行：打断单词
}
p、 不换行{
换行字：未设置
}
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx