Ограничение ширины текста, с переносами

В моем приложении rails я создаю приложение, используя каналы, я изменяю макет страницы, ограничение текста каналов составляет 140 символов, а окно, содержащее текст, имеет ширину 63em. Если текст достаточно длинный (50/60 символов), он развернется в окне. Я хочу, чтобы после определенного числа символов n текст был перенесен и продолжался в другой строке, например, если это число n равно 6, и я вставляю текст

hi my name is davide

когда он дал в качестве выхода, он станет

hi my na
me is davide

даже если вы знаете, как включать пробелы и как не разбивать слова (имя -> на меня), скажите, пожалуйста, было бы лучше.

вот код, который дает каналы в выводе

<body align="center">
    <div class="dialog">
        <h1>La Grande Guerra</h1>
    </div>

    <p>
      <%= link_to 'Nuovo Feed', new_feed_path %>
    </p>

    <% @feeds.each do |feed| %>
      <p>
          <b>Data di pubblicazione: </b><%= feed.date %><br><br>
          <b>Feed:</b><br><br>
          <%= feed.feed_text %><br><br>
          <%= link_to 'Mostra', feed %>
          <%= link_to 'Modifica', edit_feed_path(feed) %>
          <%= link_to 'Elimina', feed, method: :delete, data: { confirm: 'Are you sure?' } %>
          <a href="http://localhost:3000">Torna all'inizio<br></a>
      </p>
    <% end %>

    <br>

  </body>

и вот как я создаю "окна" (я взял этот код из страницы ошибки 404)

div.dialog 
    {
      width: 55em;
      margin: 4em auto 0 auto;
      border: 1px solid #CCC;
      border-right-color: #999;
      border-left-color: #999;
      border-bottom-color: #BBB;
      border-top: #B00100 solid 4px;
      border-top-left-radius: 9px;
      border-top-right-radius: 9px;
      background-color: white;
      padding: 7px 4em 0 4em;

    }

    body > p 
    {
      width: 63em;
      margin: 0 auto 1em;
      padding: 1em 0;
      background-color: #F7F7F7;
      border: 1px solid #CCC;
      border-right-color: #999;
      border-bottom-color: #999;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      border-top-color: #DADADA;
      color: #666;
      box-shadow:0 3px 8px rgba(50, 50, 50, 0.17);
      color:black;
    }
Источник

1 ответ

Попробуй это

   body > p 
        {
          width: 63em;
          margin: 0 auto 1em;
          padding: 1em 0;
          background-color: #F7F7F7;
          border: 1px solid #CCC;
          border-right-color: #999;
          border-bottom-color: #999;
          border-bottom-left-radius: 4px;
          border-bottom-right-radius: 4px;
          border-top-color: #DADADA;
          color: #666;
          box-shadow:0 3px 8px rgba(50, 50, 50, 0.17);
          color:black;

 -ms-word-break: break-all;
     word-break: break-all;

     // Non standard for webkit
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
        }
Источник
Другие вопросы по тегам