текст уходит со страницы в компоненте 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>

Вот пример сообщения, в котором это происходит без переноса текста


html vue.js buefy bulma
person Chloroform    schedule 08.11.2020    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Вам нужно использовать 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>

person Lawrence Cherone    schedule 08.11.2020

arrow_upward
0
arrow_downward

p, содержащий содержимое сообщения, должен иметь максимальную ширину:

 <p class="container is-max-desktop">{{ post.postMarkdown }}</p>
person Boussadjra Brahim    schedule 08.11.2020

arrow_upward
0
arrow_downward

Это можно решить любым количеством способов с помощью css. Вы можете стилизовать свои абзацы (теги p) или добавить класс css к этому конкретному абзацу для содержимого публикации, как и в других местах, поэтому

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

Задайте ширину, обтекание текстом - или напрямую введите стиль, например

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

Было бы полезно увидеть, какие стили CSS используются, если таковые имеются, в дополнение к вашему html, если это предложение не решает проблему.

person csdev    schedule 08.11.2020