word-break

word-break, prefer normal but if not possible break-all

由 北慕城南 提交于 2019-12-10 17:15:50
问题 I am creating a very thin page (it's being printed on receipt paper: 56mm wide) I am trying to display some text (in this case shipping selection). Sometimes this text is normal a number of spaced words, e.g. 'Signed for 1st Class', sometimes it is one long word, e.g. 'UK_RoyalMailSecondClassStandard'. My HTML/CSS doesn't know what the text will be (it's rendered php) My html is: <div style="margin: 0px;max-width: 56mm;font-family: Arial;border: 1px solid black;"> Break-all: <p> Your selected

Firefox word-break for inline elements

由 ↘锁芯ラ 提交于 2019-12-07 17:29:45
问题 I'm trying to change the word-break property for certain inline elements such as <span> and <a> to get a better flow of the page's content. It seems, that Firefox only recognises the word-break property for elements that are displayed as block (such as <div> ), whereas Chrome honours the request to break the words. In the example below, the red and blue parts render identically in Chrome (the xxxxx is broken over several lines). In Firefox, the xxxxx in the red box overflows. <div style=

CSS: Wrap text AND break word if necessary

由 本秂侑毒 提交于 2019-12-07 10:54:13
问题 How can I set up a div such that it will wrap text AND will also break word if necessary? Examples below, with the dots showing the width of the div ("zzzzzzz..." is all one word). .................................... Hello these are words .................................... zzzzzzzzzzzzzzzzzz zzzzzz 回答1: You can use css word-wrap: break-word; .wrap { width: 50px; word-wrap: break-word; border: 1px solid red } <div class="wrap">This is a mormal div wrapping and breaking words</div> 回答2: and

Html2pdf doesn't support word-break:break-all css

由 南笙酒味 提交于 2019-12-04 05:06:34
hai everybody i am using html2pdf ,it doesn't support word-break:break-all css any idea? example <td style="width:30%;word-break:break-all ;"> testtestetstetstetstetstettstetstetstetstetstetstetstetstetstetstets </td> output pdf take above 30% width like string length size output pdf: testtestetstetstetstetstettstetstetstetstetstetstetstetstetstetstets I want Output : testtestetstetstetstetstettstets tetstetstetstetstetstetstetstets Well, that's complicated. Your teststring is too long, but it's not composed of multiple words. That means that word-break won't work, because there aren't any

Smarter word break in CSS?

由 百般思念 提交于 2019-12-03 05:26:31
问题 If I just put word-break: break-all on an element, I often end up with this: Hello people, I am typing a mes sage that's too long to fit! Obviously this would be much better as: Hello people, I am typing a message that's too long to fit! But at the same time if someone writes: BLAAAAAAAAARRRRRRRRRRRRGGGGGGGGHHHHHHHH!!!!!! Then I'd want it to be: BLAAAAAAAAARRRRRRRRRRR RGGGGGGGGHHHHHHHH!!!!!! I can't seem to find a way to actually do this. Note that the width of the element is not fixed and

Smarter word break in CSS?

由 ↘锁芯ラ 提交于 2019-12-02 18:45:55
If I just put word-break: break-all on an element, I often end up with this: Hello people, I am typing a mes sage that's too long to fit! Obviously this would be much better as: Hello people, I am typing a message that's too long to fit! But at the same time if someone writes: BLAAAAAAAAARRRRRRRRRRRRGGGGGGGGHHHHHHHH!!!!!! Then I'd want it to be: BLAAAAAAAAARRRRRRRRRRR RGGGGGGGGHHHHHHHH!!!!!! I can't seem to find a way to actually do this. Note that the width of the element is not fixed and may change. PJ McCormick Try word-break: break-word; it should behave as you expect. For a lot of our

Breaking words using CSS

由 你离开我真会死。 提交于 2019-11-29 03:00:36
问题 When the text in <p> tag is too long, it appears like this, how to prevent this with CSS? I've tried the CSS property word-break: break-all; but Firefox and Opera doesn't support this property, and besides that other "normal" words also breaking. So I want to break only very long words, but not short words, depending on width of white <div> . body { background-color: #ccc; } h2 { float: left; color: #525254; margin: 0px; font: bold 15px Arial, Helvetica, sans; } .post { background-color: #fff

How can I allow text to wrap inside a word if necessary?

由 荒凉一梦 提交于 2019-11-28 08:10:33
I am looking for the best solution to allow text to wrap in the middle of a word if necessary. By best, I mean most browser-compatible, and will favor word breaks before it breaks inside a word. It would also help if the markup looked nicer than mine (see my answer). Edit: Note this is specifically for user-generated content. Edit 2: About 25% of Firefox users on the site in question are still using v3.0 or below, so it is critical to support them. This is based on the last month worth of data (about 121,000 visits). The css property word-wrap: break-word will force long words to wrap to the

Difference between word-wrap: break-word and word-break: break-word

由 你离开我真会死。 提交于 2019-11-28 01:01:28
I needed to fix some CSS somewhere because my text wasn't wrapping around and was instead going on indefinitely if it was an extremely long word. Like in most cases, I tried word-wrap: break-word; in my CSS file and it did not work. Then, to my surprise, and by the suggestion of Google Chrome Developer Tools, I tried word-break: break-word; and it fixed my problem. I was shocked by this so I've been googling to know the difference between these two but I have seen nothing on the subject. Further, I don't think word-break: break-word; is documented behavior seeing as how W3 has no mention of it

How to use automatic CSS hyphens with `word-break: break-all`?

由 ╄→гoц情女王★ 提交于 2019-11-27 09:12:28
I'm using word-break: break-all; and want to know how I can have the browser automatically insert the hyphens , as demonstrated in an MDN example . div { width: 80px; height: 80px; display: block; overflow: hidden; border: 1px solid red; word-break: break-all; hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; } <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> Such that the text would look like this: aaaaaaaa- aaaaaaaa- aaaaaaaa- aaaaaaaa I created a JSFiddle too.
订阅 word-break