How to wrap between letter and punctuation to avoid extra blank space in the end of line?

The first box has an annoying blank in the end of its first line. The second box works fine.

I think CSS try to avoid punctuation to appear in the beginning of one line. But it results ugly topography.

How can I force it to wrap?

.box {
  margin: 2em;
  padding: 0.5em;
  width: 8em;
  height: 8em;
  border: 1px solid;
}
.text {
  font-size: 1em;
}
<div class="box">
  <p class="text">你好,我来自中国!!!你好,我来自中国!</p>
</div>
<div class="box">
  <p class="text">你好,我来自中国你好,我来自中国</p>
</div>

Answers


Since you're writing Chinese, I guess word-wrap: break-word; word-break: break-all; will serve the purpose:

.box {
  margin: 2em;
  padding: 0.5em;
  width: 8em;
  height: 8em;
  border: 1px solid;
}
.text {
  font-size: 1em;
  word-wrap: break-word;
  word-break: break-all;
  white-space: pre;
}
<div class="box">
  <p class="text">你好,我来自中国!!!你好,我来自中国!</p>
</div>
<div class="box">
  <p class="text">你好,我来自中国你好,我来自中国</p>
</div>

Need Your Help

Is there a C# SecureString equivalent in C++?

c# c++ securestring

I have a SecureString in my C# code that I need to pass into a DLL. I would prefer to not do a Marshalling as it seems that when this occurs the SecureString is unencrypted (and hence not secure an...

Why NSMutableURLRequest gets defined different in iOS6 and iOS7

iphone objective-c ios6 ios7 nsmutableurlrequest

I Have the following piece of Code that works perfectly fine in iOS6 but not in iOS7, the difference is how the request1 is constructed by each version, why it changes and what can be done to make it