为什么空间会影响使用空白的风格，以及如何解决这个问题？

在此示例为什么空间会影响使用空白的风格，以及如何解决这个问题？

<html> 
<head> 
    <style> 
     .q_show_spaces { 
      white-space: pre-wrap; 
    } 

    .q_inline { 
     display: inline; 
    } 

    .q_no_wrap { 
     white-space: pre; 
    } 
</style> 
</head> 

<body> 
<div style="width:400px;border:solid 1px"> 
    <div class="q_show_spaces"><div class="q_inline">To testaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div><div class="q_inline q_no_wrap"><div class="q_inline">aaaaaaaaaaaaaaaaaaaaaa aaaaaaabbb, </div></div><div class="q_inline">by like terms</div></div> 
</div> 

<br /> 
<br /> 

<div style="width:400px;border:solid 1px"> 
    <div class="q_show_spaces"><div class="q_inline">To testaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div><div class="q_inline q_no_wrap"><div class="q_inline">aaaaaaaaaaaaaaaaaaaaaa aaaaaaabbb,</div></div><div class="q_inline"> by like terms</div></div> 
</div> 

</body> 
</html>

在第一示例中，内容是要在div之外，但在第二个例子中的内容如预期的，唯一的变化是空间移出的div。

如何解决这个问题？我不想移动外部空间，也不想移除div上的任何div或样式。建议任何可以覆盖这些并正确工作的新风格。

对不正确的HTML格式。

来源

2014-02-11 madhu_p

看来您在寻找word-break: break-all css属性。

应用像这样在你的CSS：

.q_show_spaces { 
    white-space: pre-wrap; 
    word-break: break-all; /* or break-work, if you planning to break a word */ 
}

Working Fiddle

MDN Article

来源

2014-02-11 14:51:44

貌似完美的，这是我所期待的。 –

@madhu_p如果它回答你的问题，请将其标记为答案。 –

感谢您的修复，但仍然没有解决， –

为什么空间会影响使用空白的风格，以及如何解决这个问题？

回答

相关问题