0

In a rails app of mine i'm building an app using the feeds , i'm modifying the layout of a page , the feeds' text limit is of 140 characters and the window which contains the text is 63em width. If the text is long enough (50/60 characters) it will spread out the window, i want that after a certain number n of characters the text will wraps and continue in another line, for example if that number n is 6 and i insert the text

hi my name is davide 

when it has given as output it will became

hi my na
me is davide

if you know even how to include spaces and how to don't break words (name --> na me), please tell me , it would be better.

here's the code which gives the feeds in output

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

and this is how i create the "windows" (i took this code from the error 404 page)

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;
    }
4

1 回答 1

0

尝试这个

   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;
        }
于 2014-07-07T14:11:31.350 回答