Question

在我的rails应用程序中，我正在使用Feed构建应用程序，我正在修改页面的布局，提要＆＃39;文本限制为140个字符，包含文本的窗口为63em宽度。如果文本足够长（50/60个字符）它将展开窗口，我希望在一定数量的n个字符之后文本将包装并继续在另一行中，例如，如果该数字n是6并且我插入文字

hi my name is davide

当它作为输出时，它将成为

hi my na
me is davide

如果你知道如何包含空格以及如何打破单词（名字 - ＆gt; 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>

这就是我如何创建＆＃34; windows＆＃34; （我从错误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;
    }

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

文本宽度限制，包装

1 个答案: