スパンに正しく単語を表示するためのCSSスタイリング

Question

以下のテンプレートを使用してHTMLを生成しました。問題は、ウィンドウのサイズを変更してからスパンのテキストが正しく表示されない場合です。私が期待したものではない線。この問題を解決するにはどうすればよいですか？

template: _.template([ 
     '<div class="notes">', 
     '<label class="control-label"><%=label%>:</label>', 
     '<span><%=text%></span></div>' 
    ].join("\n")) 

CSS：以下

.notes { 
    background-color: #f5f5f5; 
    border: 1px solid #ccc; 
    border-radius: 3px; 
    color: #333; 
    display: block; 
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace; 
    font-size: 12px; 
    line-height: 1.42857; 
    margin: 0 0 10px; 
    overflow: auto; 
    padding: 5px 10px; 
    word-break: break-all; 
    word-wrap: break-word; 
} 

div.notes label.control-label { 
    min-width: 0px; 
} 

は私のHTMLページからのスクリーンショットです。

Answer 1

あなたはpre-wrapにwhite-spaceセットを持っているように見えます。あなたは、全体のコードは<pre>内部に注入されたかどうかを確認する必要があるか、によってwhite-spaceプロパティをリセットする必要があります。より多くの情報を含むため

span {white-space: normal;}