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

Question

我正在制作“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 发生这种情况的例子

Answer 1

包含 post 内容的 p 应具有最大宽度：

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

Answer 2

这可以通过 css 的多种方式解决。您可以为段落设置样式（p 标签），或者为 post 内容的特定段落添加 css class，就像您在其他地方所做的那样，因此

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

设置宽度、文字换行 - 或直接输入类似

的样式

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

如果此建议不能解决问题，除了您的 html 之外，如果有的话，看看有哪些 css 样式会很有帮助。

Answer 3

您需要使用 word-wrap: break-word，这会破坏无空格的单词。

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

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

text going off the page in vue.js component

html

vue.js

bulma

buefy