I already know the existence of this question BUT, doesn't work for me
Firefox word-break breaks short words at random points
As you can see from the screenshot I applied the mentioned CSS property but seems that the last version of FF broke words at will.
How can I prevent the break of "(09/03/2017)"? and put it on a new line like all the others browsers?
I also tried different settings of those property but nothing.
word-break: keep-all; doesn't work neither
Since is a date you could wrap that information in a
<time datetime="...">
element and apply a white-space: nowrap to it
Related
I have an odd issue, which only recently came to light.
Our database produces a list of sizes for products (e.g: Small, Medium, Large etc..)
There are also a number of sizes which are hyphenated (2-3YR, 4-5YR).
The sizes with hyphens show properly on most devices, but on IOS they look like this:
2-
3YR
4-
5YR
So IOS is breaking the line after the hyphen. I can't remove or change the hyphen as it's server generated, so is there any way to prevent this with CSS?
Thanks for the comments. display: inline-block didn't work for some reason. However I did find a JS workaround:
I used the following to substitute the hyphen after the page loads with a non-breaking hyphen, which seems a little akin to using a sledgehammer to kill a fly, but it works!
var str = elements[i].innerHTML;
var text = str.replace("-", "‑");
elements[i].innerHTML = text;
I recently ran into this issue and was experiencing it in ios chrome and macos safari.
Simply apply the following CSS to your element containing the breaking text:
word-break: keep-all;
set min-width: fit-content; to your text element ;) it worked for me.
Please take a look in Firefox at the development site here.
The same phrase "Accountantskantoor verschaeren-mertens" is shown twice, once in the sidebar and once in the upper right corner. As you can see the line breaks at different positions. I've tested in Chrome, IE and Firefox and this only occurs in Firefox.
Any thought on how to make it consistent? I've tried the following but it didn't work.
word-break: normal;
This is rather mysterious, because Firefox is clearly hyphenating the text in the upper right corner: there is a hyphen at the end of first line, indicating word division made. It’s not something that word-break would cause (it brutally breaks strings instead of proper word divisioon).
Yet there is nothing that suggests hyphenation in the code, unless I’m missing something.
But setting the following on the element prevents Firefox from hyphenating:
-moz-hyphens: manual
Presumably Firefox now has some defaults that cause automatic hyphenation in some situations (possibly -moz-hyphens: auto with some fancy selector). And since Firefox still does not use hyphens as the property name, the vendor-prefixed property needs to be used.
Setting the value to manual allows a break after a hyphen as well as the effect of soft hyphens. To disallow even them, use the value none instead.
The implementation of this feature differs in browsers so IMO the only solution is to use hyphenator.js There is also a
hyphenator wordpress plugin
This question already has answers here:
Can I hide the HTML5 number input’s spin box?
(20 answers)
Closed 8 years ago.
Just looking to remove these arrows, convenient in certain situations.
I would like to preserve the browser's awareness of the content being purely numeric however. So changing it to input[type="text"] is not an acceptable solution.
Now that Opera is webkit based, this question is a dulpicate of: Can I hide the HTML5 number input’s spin box?
I've been using some simple CSS and it seems to remove them and work fine.
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
<input type="number" step="0.01"/>
This tutorial from CSS Tricks explains in detail & also shows how to style them
Those arrows are part of the Shadow DOM, which are basically DOM elements on your page which are hidden from you. If you're new to the idea, a good introductory read can be found here.
For the most part, the Shadow DOM saves us time and is good. But there are instances, like this question, where you want to modify it.
You can modify these in Webkit now with the right selectors, but this is still in the early stages of development. The Shadow DOM itself has no unified selectors yet, so the webkit selectors are proprietary (and it isn't just a matter of appending -webkit, like in other cases).
Because of this, it seems likely that Opera just hasn't gotten around to adding this yet. Finding resources about Opera Shadow DOM modifications is tough, though. A few unreliable internet sources I've found all say or suggest that Opera doesn't currently support Shadow DOM manipulation.
I spent a bit of time looking through the Opera website to see if there'd be any mention of it, along with trying to find them in Dragonfly...neither search had any luck. Because of the silence on this issue, and the developing nature of the Shadow DOM + Shadow DOM manipulation, it seems to be a safe conclusion that you just can't do it in Opera, at least for now.
There is no way.
This question is basically a duplicate of Is there a way to hide the new HTML5 spinbox controls shown in Google Chrome & Opera? but maybe not a full duplicate, since the motivation is given.
If the purpose is “browser's awareness of the content being purely numeric”, then you need to consider what that would really mean. The arrows, or spinners, are part of making numeric input more comfortable in some cases. Another part is checking that the content is a valid number, and on browsers that support HTML5 input enhancements, you might be able to do that using the pattern attribute. That attribute may also affect a third input feature, namely the type of virtual keyboard that may appear.
For example, if the input should be exactly five digits (like postal numbers might be, in some countries), then <input type="text" pattern="[0-9]{5}"> could be adequate. It is of course implementation-dependent how it will be handled.
Playing around with shjs in order to display line numbers, line breaks and spaces, i came across this: Using Pseudo-Elements for the ›hidden‹ characters it behaves just as expected (in Firefox): no line numbers, spaces or line endings get copied to clipboard.
As IE8 displays everything well, I was surprised it behaves different with copy+paste.
Copy+pasting a line from FF looks like so (which is fine):
config = ({
While the same, copied from IE8 reads:
14·config· =· ({¶
The same with Opera, btw.
Does anyone know which behaviour is the correct one, and if there is a way to teach the browser the desired behaviour?
Thanks in advance
Opera and IE are correct: There is no rule which forbids copying generated content. Mozilla’s behavior is btw one of the many reasons why you can’t use the <q> element …
Unfortunately, you can’t bring all browsers in line. Generated content is not part of the DOM and therefor not accessible per Javascript.
I'm trying to use the page-break-inside CSS directive, the class of which is to be attached to a div tag or a table tag (I think this may only work on block elements, in which case it would have to be the table).
I've tried all the tutorials that supposedly describe exactly how to do this, but nothing works. Is this an issue of browser support or has anyone actually gotten this working, the exact bit of CSS looks like this:
#media print {
.noPageBreak {
page-break-inside : avoid;
}
}
Safari 1.3 and later (don't know about 4) do not support page-break-inside (try it, or see here: http://reference.sitepoint.com/css/page-break-inside). Neither do Firefox 3 or IE7 (don't know about 8).
In a practical sense, support for this attribute is SO spotty, it doesn't make sense to use it at all at this point. You'd be lucky if even 10% of your visitors have browsers that can support this.
The solution I used was to add
page-break-after:always
to certain divs, or add a "page-breaker" div in where you want breaks. This is quite ham-handed, I know, because it doesn't do quite what you want, and causes content to not reach the bottom of the printed page, but unfortunately there isn't a better solution (prove me wrong!).
Another approach is to create a stylesheet that removes all extraneous elements (display:none) and causes the main content to flow in one main column. Basically, turn it into a single column, text-only document.
Finally, avoid floats and columns when styling for printers, it can make IE (and FF) act wacky.
Safari 1.3+, Opera 9.2+, Konquerer, and IE8 all support it, at least to some degree.
Firefox apparently still does not.
Firefox does not support this as of 2010-11-30, and thus won't in Firefox 4.
IE8 does support page-break-inside: avoid - but when I tried this on IE9, it's not very successful at avoiding page-breaks (this may be a regression, or perhaps IE8 is also only capable of avoiding page breaks in very simple cases).
AFAIK it doesn't work in any webkit browser; certainly not in chrome.
It actually works in Opera, even on real sites.
Safari 1.3 and later support page-break-inside.
So does Konqueror.
I'm trying to use the page-break-inside CSS directive, the class of which is to be attached to a div tag or a table tag (I think this may only work on block elements, in which case it would have to be the table).
Firstly, there's no need to guess. Just look at the specification, and you'll see that it does indeed only apply to block-level elements.
Secondly, <div> elements are usually block-level elements, so there's no problem applying page-break-inside to a <div> element.
Finally, you don't need to wrap it in #media. You only need #media if you want to apply media-independent rules to only one medium, for instance, if you want to use display: block only for one medium. In this case, you don't need to hide those rules from other media, because they'll only apply to paged media anyway.
From preliminary searches, it's hard to find up-to-date statistics on browser support for this, but it seems that Firefox 4beta6 supports it and Chrome 7 does not. Chrome also breaks pages halfway through a line of text, so that part of the text appears on one page and part appears on the next. Uncharacteristic lack of attention to detail, but I guess neither Google nor Apple care about printing things.
Firefox 4 also adds some nice headers and footers to your prints with url, page title, site title, number of pages, and time. Nice.
As a bit more information further to Eamon Nerbonne's answer on the IE rendering (IE8+), you need to make sure the browser is in standards mode. This article on MSDN shows what is necessary - including a meta tag in your html to force the issue:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
Feels kludgy, but there you have it... seems to work more consistently.