css - 让我的评论出现在指定的 div 容器中

Question

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

SDSDSSDSDSSSDSDSDSSDSDSDS
DSSDSDSDSDSDSDSSSDSDSDSDSD
SSDSDSSDSDSSSDSDSDSSDSDSDS
DSSDSDSDSDSDSDSSSDSDSDSDSDS

例如代替:

SDSDSSDSDSSSDSDSDSSDSDSDSDSSDSDSDSDSDSDSSSDSDSDSDSDSSDSDSSDSDSSSDSDSDSSDSDSDSDSSDSDSDSDSDSDSSSDSDSDSDSDS 

评论甚至不会像上面显示的那样为长字母做双行 - 只是该消息将在整个站点上显示为单行

/comments/_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 因为字符串中没有空格。

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

<div>LONGSTRINGWITHNOSPACESLONGSTRINGWITHNOSPACESLONGSTRINGWITHNOSPACESLONGSTRINGWITHNOSPACESLONGSTRINGWITHNOSPACESLONGSTRINGWITHNOSPACES</div>

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