讓我的意見出現在指定的div容器內

Question

這可能很簡單，但由於某些原因，我無法在互聯網上找到任何解決方案，甚至無法使用我的代碼。我想有我留言/評論所分配的股利

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 AND 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>