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;
    }
DaddaBarba
  • 75
  • 5
  • I think the closest you can come with pure css is using `word-wrap:break-word` but that would involve you replacing all spaces with non breaking spaces (` `) - http://jsfiddle.net/Y3M8z/, otherwise your best bet would be to use javascript and insert a `br` every six characters – Pete Jul 07 '14 at 14:06

1 Answers1

0

Try This

   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;
        }
Suresh Karia
  • 17,550
  • 18
  • 67
  • 85