在我的一个 Rails 应用程序中，我正在使用提要构建一个应用程序，我正在修改页面的布局，提要的文本限制为 140 个字符，包含文本的窗口宽度为 63em。 如果文本足够长(50/60 个字符)，它将展开窗口，我希望在一定数量的字符后，文本将换行并在另一行中继续，例如，如果该数字 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;
}
最佳答案
试试这个
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;
}
关于html - 文本宽度限制，带换行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24612393/