标签云

在HTML中,如何打破一点的词吗?

Given a relatively simple CSS:

<div style="width:150px;">
  12333-2333-233-23339392-332332323
</div>

How do I make it so that the string stays constrained to the width of 150, and simply wraps to a newline on the hyphen?

2016年12月08日45分52秒

Replace your hyphens with this:

&shy;

It's called a "soft" hyphen.

2016年12月07日45分52秒

In all modern browsers* (and in some older browsers, too), the <wbr> element is the perfect tool for providing the opportunity to break long words at specific points.

To quote from that link:

The Word Break Opportunity (<wbr>) HTML element represents a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.

Here's how it could be used to in the OP's example (or see it in action at JSFiddle):

<div style="width: 150px;">
  12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>

*I've tested it in IE9, IE10, and the latest versions of Chrome, Firefox, and Opera, and Safari.

2016年12月07日45分52秒

As part of CSS3, it is not yet fully supported, but you can find information on word-wrapping here. Another option is the wbr tag, &shy;, and &#8203; none of which are fully supported either.

2016年12月07日45分52秒

Your example works as expected in Google Chrome, Safari (Windows), and IE8. The text breaks out of the 150px box in Firefox 3 and Opera 9.5.

Additionally &shy; won't work for your example, as it will either:

  • work when word-breaking but when not word-breaking not display any hyphens, or

  • work when not word-breaking but display two hyphens when word-breaking since it adds a hyphen on a break.

2016年12月07日45分52秒

In this specific instance (where your string is going to contain hyphens) I'd transform the text to this server-side:

<div style="width:150px;">
  <span>12333-</span><span>2333-</span><span>233-</span><span>23339392-</span><span>332332323</span>
</div>

2016年12月07日45分52秒

Depending on what you want to see exactly, you can use a combination of hyphen, soft hyphen, and/or zero width space.

On a soft hyphen, your browser can word-break (adding an hyphen). On a zero width space, your browser can word break (without adding anything).

Thus, if your code is something like :

111111&shy;222222&shy;-333333&#8203;444444-&#8203;555555

then your browser will show this with no word-break :

1111112222222-33333334444444-5555555

and this will every possible word-break :

111111-
222222-
-333333
444444-
555555

Just pick up the option you need. In your case, it may be the one between 4s and 5s.

2016年12月07日45分52秒

You can also use :

word-break:break-all;

ex.

<div style='width:10px'>ababababababbabaabababababababbabababa</div>

output:

abababababa
ababababbba
abbabbababa
ababb

word-break is break all the word or line even if no-space in sentence that not feets in provided width or height. nut for that you must be provide a width or height.

2016年12月07日45分52秒

The non-breaking hyphen works well.

HTML Entity (decimal)

&#8209;

2016年12月07日45分52秒

Instead of - you can use &hyphen; or \u2010.

Also, make sure the hyphens css property was not set to none (The default value is manual).

<wbr> is not supported by Internet Explorer.

2016年12月07日45分52秒