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
Related
I have a single line with 1 icon and 2 pieces of text - I would like to display the right-most piece of text on the far right of the line, with the other items aligned left.
I'm trying to keep the code as lean as possible so I'd like to see if this can be done without using floats, without wrapping each <p> in a <div> of its own and also without JS (which is why I couldn't find an appropriate answer from similar questions asked on here).
Here's the JSFiddle, I'd like to have the word Break displayed on the far right of the line and have the task take up the rest of the width of the containing div:
http://jsfiddle.net/2w1cu71e/
Thank you in advance for any help you might be able to give me, I'm finding it a bit hard to find definitive resources on CSS best practices (aside from CSS Tricks!).
Ines
You only need to add position:absolute;right:0; to .task-category but this markup might be made far simpler if you don't have a reason to be using the <p> elements at all.
All-in-all, I don't see the difference to using a float. There's also the question as to why the <p> is an inline-block but you have your reasons.
I think using <p> tag there doesn't make sense, <span> would be better for doing the job. For the layout I think CSS table table-row table-cell can be a good option over flexbox, and it works on all browsers.
DEMO: http://jsfiddle.net/2w1cu71e/1/
#done {
display: table;
width: 100%;
}
.desc-single-line {
display: table-row;
}
.desc-single-line i,
.desc-single-line span {
display: table-cell;
}
.desc-single-line i {
width: 20px;
}
.desc-single-line span {
font-size: 0.8em;
font-family: 'Open Sans', sans-serif;
}
.desc-single-line .task-category {
color: red;
text-align: right;
}
can you try this instead of the CSS provided? For some reason it doesn't work on jsfiddle but it works just fine on a local html file.
.desc-single-line {
display: flex;
flex-direction: row;
}
.task-category{
color:red;
text-align: right;
flex: 2;
}
.desc-single-line p{
font-size: 0.8em;
font-family: 'Open Sans', sans-serif;
}
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'm trying to get a div to be centered on the page. however WordPress isn't cooperating and doing it like it does in my testing HTML document. Any ideas?
HTML
<div class="propreq grid_4"><h2>Request a Proposal</h2></div>
CSS
.propreq {
margin: 0 auto;
text-align: center;
padding-top: 20px;
padding-bottom: 10px;
background-color: #0e7bd0;
}
Looks like it's because of a couple things. Try adding the styles below to your current definition (or changing them, if they're already there):
.propreq {
display: block;
float: none;
}
Before, .propreq had display:inline, float:left applied to it, making the styles you were applying to it ineffective. I hope this gives you what you were looking for! If not, let me know and I'll be happy to help further. Good luck!
There could be Several reasons.
1st: Try examining the CSS using Developer's Tools (in Chrome/FireFox).
There could be another CSS rule which is OVER-RIDING your this one.
2nd: Try using
<div align="center" class="propreq grid_4"><h2>Request a Proposal</h2></div>
My best guess is, Another CSS-Rule is overtaking the Center Property.
.propreq {
margin: 0 auto;
text-align: center;
padding-top: 20px;
padding-bottom: 10px;
background-color: #0e7bd0;
}
TIP: Do a quick search on "Examining using FireFox Developer Tools" | Check out for the text-align: center; in .propreq section.
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
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.