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

Question

我正在制作“reddit 克隆”，目前我的文本没有换行，我不确定为什么当标题扩展时，它需要一个新行，但不是 for 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>

这是发生这种情况的帖子示例

标签： htmlvue.jsbulmabuefy

Answer 1

您需要使用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>