Блог

Главная - Вопросы по программированию - Ограничение ширины текста с переносами

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

#html #css #ruby-on-rails #text #text-width

#HTML #css #ruby-on-rails #текст #ширина текста

Вопрос:

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

 hi my name is davide

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

 hi my na
me is davide

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

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

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

и вот как я создаю «windows» (я взял этот код со страницы ошибки 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. Я думаю, что самое близкое, что вы можете сделать с чистым css, — это использовать word-wrap:break-word , но это потребовало бы замены всех пробелов неразрывными пробелами ( amp;nbsp; ) — jsfiddle.net/Y3M8z в противном случае лучше всего использовать javascript и вставлять br каждые шесть символов

Ответ №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;
        }