Question

这可能很简单，但由于某种原因，我无法在互联网上找到任何解决方案，甚至无法使用我的代码。我想让我的消息/评论出现在指定的div

中

SDSDSSDSDSSSDSDSDSSDSDSDS
DSSDSDSDSDSDSDSSSDSDSDSDSD
SSDSDSSDSDSSSDSDSDSSDSDSDS
DSSDSDSDSDSDSDSSSDSDSDSDSDS

例如，

而不是：

SDSDSSDSDSSSDSDSDSSDSDSDSDSSDSDSDSDSDSDSSSDSDSDSDSDSSDSDSSDSDSSSDSDSDSSDSDSDSDSSDSDSDSDSDSDSSSDSDSDSDSDS

评论对于如上所示的长信甚至不会做双行 - 简单地说，该消息将在整个网站上单行显示

/评论/ _comment

<h2>Comments</h2>
<% commentable.comments.reverse.each do |comment| %>
 <div class="well">
  <%= image_tag comment.user.avatar.url(:medium), class: 'comment_image' %>
  <div class="arrow_box">
   <ul class'messagebox'><%= comment.text %></ul>
   <%= time_ago_in_words(comment.created_at) %> <strong>ago</strong>
  </div>
 </div>
<% end %>

CSS - comments.css

.well {
  width: 400px;
}
.comment_container {
  float: right;
  margin-right: 150px;
  width: 400px;
}

.comment_next_to_picture {
  float: right;
  margin-right: 240px;
  display: inline-block;
  margin-top: 50px;
}

.profile_comment_box {
  margin-bottom: 5px;
}

.profile_comments_box {
  float: right;
}

.arrow_box {
  position: relative;
  background: #3e5361;
  border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.arrow_box:after {
  border-color: rgba(62, 83, 97, 0);
  border-right-color: #3e5361;
  border-width: 30px;
  margin-top: -30px;
}
.arrow_box:before {
  border-color: rgba(194, 225, 245, 0);
  border-right-color: #c2e1f5;
  border-width: 36px;
  margin-top: -36px;
 }

如有进一步的问题，请询问。再次感谢您对此问题的所有建议和解决方案。

Answer 1

使用white-space和word-break，因为字符串中有无空格。

＆＃13;

.wrap {
  /*
  * To make this cross-browser compatible, you'll need to address each browser.
  * Hence, the multiple "white-space"
  */

  white-space: -moz-pre-wrap !important;
  white-space: -webkit-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
}

/* This div is only for styling purposes */
div { width:100px; margin:10px; background:#ddd; }

＆＃13;

<div>LONGSTRINGWITHNOSPACESLONGSTRINGWITHNOSPACESLONGSTRINGWITHNOSPACESLONGSTRINGWITHNOSPACESLONGSTRINGWITHNOSPACESLONGSTRINGWITHNOSPACES</div>

<div class="wrap">LONGSTRINGWITHNOSPACESLONGSTRINGWITHNOSPACESLONGSTRINGWITHNOSPACESLONGSTRINGWITHNOSPACESLONGSTRINGWITHNOSPACESLONGSTRINGWITHNOSPACES</div>

＆＃13;

让我的注释出现在指定的div容器中

1 个答案: