Home  >  Article  >  Web Front-end  >  Why is there no line break even after adding word-break: break-all;? _html/css_WEB-ITnose

Why is there no line break even after adding word-break: break-all;? _html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:12:391680browse

1943735c4bf021e643cda3e159753447
ee7959cc8dd4be16ef633321c03dac32Business School5db79b134e9f6b82c0b36e0489ee08edee7959cc8dd4be16ef633321c03dac32Business School5db79b134e9f6b82c0b36e0489ee08ed ee7959cc8dd4be16ef633321c03dac32Business School5db79b134e9f6b82c0b36e0489ee08edee7959cc8dd4be16ef633321c03dac32Business School5db79b134e9f6b82c0b36e0489ee08ed
ee7959cc8dd4be16ef633321c03dac32Business School< ;/a>ee7959cc8dd4be16ef633321c03dac32Business School5db79b134e9f6b82c0b36e0489ee08edee7959cc8dd4be16ef633321c03dac32Business School5db79b134e9f6b82c0b36e0489ee08edee7959cc8dd4be16ef633321c03dac32Business School 5db79b134e9f6b82c0b36e0489ee08ed
ee7959cc8dd4be16ef633321c03dac32Business School5db79b134e9f6b82c0b36e0489ee08edee7959cc8dd4be16ef633321c03dac32Business School5db79b134e9f6b82c0b36e0489ee08edb5a63eb323562bbd99b282e6a2c94492Business Academy5db79b134e9f6b82c0b36e0489ee08edee7959cc8dd4be16ef633321c03dac32Business Academy5db79b134e9f6b82c0b36e0489ee08ed
16b28748ea4df4d9c2150843fecfba68

c9ccee2e6ea535a969eb3f532ad9fe89
.tagwraper{ width:940px;/*990-48*/border:1px solid #E6E6E6;padding:24px; background:#fff; margin:0 auto;word-break : break-all; }
.tagwrapper a{float: left;margin-right:26px;color:#3178C6;}
.tagwrapper a:hover{background:#217BD1;color:#fff;}
531ac245ce3e4fe3d50054a55f265927


Reply to the discussion (solution)

There should be no line breaks here. Wrong thinking
white-space:nowrap;

<div class="tagwraper"><a href="#">商人学院</a><a href="#">商人学院</a><a href="#">商人学院</a><a href="#">商人学院</a><a href="#">商人学院</a><a href="#">商人学院</a><a href="#">商人学院</a><a href="#">商人学院</a><a href="#">商人学院</a><a href="#">商人学院</a><a href="#">商人学院</a><a href="#">商人学院</a></div><style>.tagwraper{width:940px;/*990-48*/border:1px solid #E6E6E6;padding:24px; background:#fff; margin:0 auto;word-break : break-all; }.tagwraper:after{	content:".";	display:block;	clear:both;	height:0;	visiblity:hidden;}.tagwraper{	zoom:1;  /* for IE */}.tagwraper a{float:left;margin-right:26px;color:#3178C6;}.tagwraper a:hover{background:#217BD1;color:#fff;}</style>

If What you are talking about is the closing of floating elements. The above will do.

I’m confused. I just submitted it. The A tag inside is floating. It’s useless to set these on the outer layer.
There should be no line breaks here. Wrong thinking
white-space:nowrap;

<div class="tagwraper"><a href="#">商人学院</a><a href="#">商人学院</a><a href="#">商人学院</a><a href="#">商人学院</a><a href="#">商人学院</a><a href="#">商人学院</a><a href="#">商人学院</a><a href="#">商人学院</a><a href="#">商人学院</a><a href="#">商人学院</a><a href="#">商人学院</a><a href="#">商人学院</a></div><style>.tagwraper{/*990-48*/border:1px solid #E6E6E6;padding:24px; background:#fff; margin:0 auto;white-space:nowrap; }.tagwraper a{display:inline-block;margin-right:26px;color:#3178C6;}.tagwraper a:hover{background:#217BD1;color:#fff;}</style>

I’m confused. I just submitted it. The A tag inside is floating. It’s useless to set these on the outer layer.

Quote from the 1st floor’s reply:

You should add a line break here, which is wrong.
white-space:nowrap;



JScript code

1943735c4bf021e643cda3e159753447
ee7959cc8dd4be16ef633321c03dac32Business School5db79b134e9f6b82c0b36e0489ee08edee7959cc8dd4be16ef633321c03dac32Business School16ef26f8b7ea0fc89bdf90e275a93e5dee7959cc8dd4be16ef633321c03dac32Business Academy5db79b134e9f6b82c0b36e0489ee08ed Why use display:inline-block;? Ah

inline-block inline block element

Please refer to
http://www.blueidea.com/tech/web/2007/4532.asp