im trying to ellipsis a h2 tag with text-overflow. It works fine i all browsers but on Android.
The three dots jumps behind the clipped text so you can't actually see the ellipsis.
The css for the h2 is:
h2 {
font-size: 20px;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 40%;
}
I have a lot of other styles but can't figure out what will affect this.
I did a dummy test which works fine, so i was wondering if someone experienced this behaviour before?
So i managed to figure it out, by running through the css line by line. It turns out that text-rendering: optimizeLegibility;
causes the bug!
Removed it and now it works perfectly!
this worked for me
Basically add text-rendering: auto; to your css that has the ellipsis
https://github.com/driftyco/ionic/issues/663
Related
I've setup a demo as follows:
<div>Bar Foo</div>
And styles:
div {
width: 100px;
overflow: hidden;
border: 1px solid black;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 50px;
font-family: 'Pacifico', cursive;
}
Now, In Chrome the dots of the ellipsis are in the correct font, but in Safari the dots are in a different font. Is there a way to fix this ?
The central issue is that the Pacifico font as used in the demo* does not include an ellipsis character (U+2026). Safari uses that character when text-overflow: ellipsis is active. Because the character is not present in the active font, the font-fallback mechanism selects a different font that does contain the character and that is what is rendered.
This does not occur under Chrome because Chrome apparently synthesizes an ellipsis using the glyph shape of the period (U+002E) character (it's not clear to me whether Chrome always does this, or only in cases where the font doesn't include U+2026).
*Note: the complete Pacifico font on Google fonts does appear to contain U+2026, so it's something to do with the font getting subsetted when using webfont.js as in this demo.
When using text-align: justify; to justify a text chromes lets some of the lines overflow the parent div (in my case p). While other browsers (I tested it on Mozilla Firefox only), seem to be working fine with this property.
Here is an image to elaborate the issue:
And here is Jsfiddle contains a simple code of mine
Please note that I'm using:
Bootstrap 3.2.0
bootstrap-rtl-3.2.0-rc4
Futures Search - Works Fine!
text-align: justify;
display: table-row;
text-align-last: justify;
Screenshots
adding display:inline; to #product-description p
#product-description p {
text-align: justify;
display:inline;/*added*/
}
DEMO
Or add display:inline; to #product-description
DEMO
Added display: inline; to .panel-body working well as i can see for both browser:
DEMO
Add
word-break: break-word;
into your class
I know it's very late to answer this question but
text-align: justify;
Doesn't work on chrome. You can check here
Internet explorer keeps on splitting my words. Chrome and Firefox are working fine.
Here is my code and the link to the website: http://www.hgsainc.com/about/
Thanks for your help!
.page #main .entry-content {
width: 100%;
padding-right: 0;
word-wrap: normal;
-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;
table-layout: fixed;
}
.page #main .entry-content p,
.page #main .entry-content span {
font-size: 16px;
line-height: 30px;
text-align: right;
}
I haven't looked at your site, but it looks like you need to add the -ms-hyphens prefix to your css. You have the -webkit and -moz but no -ms:
-ms-hyphens: none;
See here for more info: http://msdn.microsoft.com/en-us/library/ie/hh771871(v=vs.85).aspx
Also, after looking into it a bit more, it looks like Opera doesn't support this, and neither do most mobile browsers: http://caniuse.com/css-hyphens - Just a heads up in case you come across that down the road.
After checking the developer tools in Internet Explorer, inspecting the paragraph that was having this problem showed a -ms-hyphens:auto; style in your code. You should probably add a style with -ms-hyphens:auto; to your block of styles to prevent this from happening.
The style that causes this is placed in http://www.hgsainc.com/wp-content/themes/twentythirteen/style.css, at the * 5.3 Entry Content part. You can also remove the hyphens styles from there to prevent having to do this.
I went to Settings > Edit Theme > Advanced and added this to it, under <style type="text/css">, but it doesn't work:
pre { overflow: auto; }
code { background-color: LightGrey; padding: 1px 3px; }
The first statement doesn't take effect when accessed with Chromium (I expect a horizontal scroll to appear). The second one, which I added for demonstration purposes, works well.
Here's the page you can look at to see how well it doesn't work.
I've tested with these browsers:
Chromium and Epiphany works not
Firefox and Konqueror works
update:
Following a suggestion, I've tried all these whitespace properties inside the <pre> tag: normal, nowrap, pre, pre-line, and pre-wrap. The problem remains.
If you float .code left then it will work:
.code {float: left;}
pre { white-space: pre;}
To have a horizontal scroll bar show up, you need to add:
pre { white-space: nowrap; }
On the actual page you have the css:
pre { overflow: auto; white-space: pre-line; }
This is overwriting any other white-space declaration and therefore it will not have horizontal scroll. Changing this to white-space: nowrap fixes the problem.
In the following page http://ada.kiexpro.com/test2/map.html
I added:
white-space: normal;
to wrap the copyright text that is coming our from the Google map API.
It works in FF and IE but Chrome seems to ignore the CSS selector:
global.css:
#cm_map span {
white-space: normal !important;
}
Google has an anonymous div with inline styles surrounding the copyright content. Only hook I can see is that it's a sibling of the "logocontrol" div. To override, try something like the following:
#cm_map #logocontrol + div[style] {
left: auto !important;
line-height: 13px;
right: 5px;
bottom: 6px !important;
white-space: normal;
width: 95%;
}
Not thoroughly tested but something like this should work.
This may also be a bug in Chrome: white-space normal !important doesn't override nowrap.
I've reported this bug at http://code.google.com/p/chromium/issues/detail?id=89573, but based on how they have been completely ignoring a more important issue since 2009, I have little hope of this being fixed.
Here is another example of chrome ignoring the important. This time its on the position. Unclicking the "position: relative" does bring the absolute into the picture. So the style is valid.