I'm using php to echo words from data, now the data might have long words length, about 50 words without using <br />.
Since the outpost doesn't have <br /> tag he got scrolling right (x) option (I know I can use overflow-x: hidden; but thats not it).
CSS
.main-text{
padding-left: 250px;
margin: -160px 0 0;
padding-bottom: 70px;
}
.autobody{
width: 101.4%;
height: auto;
margin: -15px -10px;
background: #fff;
max-width: 101.4%;
}
My question is how can I block words from getting out the page without hidden the content? (the content from php data)
Example Image With Overflow-x: hidden;
http://img13.imageshack.us/img13/1291/m8w.png
Example Image Without Overflow-x: hidden;
http://img22.imageshack.us/img22/9567/fqn.png
Try this CSS:
word-wrap:break-word;
jsFiddle
try
word-wrap: break-word;
in the css
or if you want to use PHP to add the
wordwrap($text, 20, "<br />\n", true);
see the wordwrap function for more info
There's a great CSS property for that: http://webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap
Try word-wrap: break-word;
Related
please, I have a problem with terminal simulator. I want show one line in full length without wrapping of course but text (text-align: left of course). It's fine in desktop but if you will smaller the window you will see horizontal scrollbar. I solve this with max-width: 100vw but then scrollbar is still visible below the text. It's for desktop. I think that this is solved. But have you some better ideas for terminal emulator? What library is standard used which can copy your code, etc...? Thank for advice
My html scratch
<div class="terminal">
<pre class="terminal">cd ~
mkdir Projects
git clone https://github.com/zrebec/JavaLearning/ThisIsVeryVeryVeryLongURLPathToDestination/DesignPatterns.git
/zeroscratch.sh init</pre>
</div>
and css scratch
.terminal {
// Layout
padding: 5pt;
border-radius: .5em;
display: inline-block;
// Colors
background-color: $secondary;
color: $color5;
// Text
font-family: monospace;
font-weight: $font-weight-bold;
line-height: $terminal-line-height;
text-align: center;
}
.terminal pre {
// Layout
overflow-x: auto;
margin: -17px; // This is for compatibility with mobile devices
// Text
text-align: left;
}
Don't worry about variables, I'm using Sass for normal programming. But I have some questions please:
It's needed to have negative margin? I read that it's for mobile browser compatibility. And yes, otherwise page is scroll-able which is really ugly. But the question is, existing most modern solutions for terminal emulator?
It's better use <pre> or <textarea> for terminal simulator? Thank you
Full my code is on my codepen
Thanks for any advice
PS: My desire is avoid Javascript or Bootstrap for now. Thank you for understand
Best Regards
If I understood well, please check if this is the behavior you're wanting to happen :
.terminal {
width: 90%;
height: 100px;
padding: 10px;
background: #000;
color: #0f0;
border-radius: 10px;
font-family: monospace;
text-align: left;
}
.terminal pre {
margin: 10px;
padding: 10px;
overflow-x: scroll;
overflow-y: hidden;
}
<div class="terminal">
<pre>cd ~
mkdir Projects
git clone https://github.com/zrebec/JavaLearning/ThisIsVeryVeryVeryLongURLPathToDestination/DesignPatterns.git
/zeroscratch.sh init</pre>
</div>
You had both items with the same class which was conflicting with the browser applying the styling. And if you want the scrollbar to appear only horizontally, just make sure also to hide the vertical bar with overflow-y: hidden;.
Here's a fiddle, so you can resize the window and see it working responsively. Hope it helped!
JSFiddle
So I have the following code in html
<div class="equipment-utilization-chart" >
<ng-container *ngIf="data.healthRecco1 !== ''" >
<div class="recommendations"> <p> 1. {{data.healthRecco1}}</p> </div>
<div class="recommendations"><p> 2. {{data.healthRecco2}}</p></div>
<div class="recommendations"><p>3. {{data.healthRecco3}}</p></div>
</ng-container>
</div>
Value in data.healthRecco2 is really long, so it doesn't word wrap but rewrites on the same line making the text not decipherable
The following is the code in the .scss file
.equipment-utilization-chart {
left: rem(444);
width: rem(682);
height: rem(85);
line-height: 0;
.recommendations {
width: auto;
height: auto;
margin-top: 35px;
word-wrap : break-word; }
}
What should I do to get the text to word wrap to the next line. Any help will be greatly appreciated.
Your issue appears to be due to your use of line-height: 0;. By setting it to zero you're telling the browser to write new lines without any distance between the previous. Hence you're seeing the new lines appear over the top of the previous ones.
There are some nifty 'hacks' you can do with zero'ing out line-height. In this situation though it seems like it might be the cause of your particular issue.
I hope this little codepen will help in explaining what's going on:
https://codepen.io/ojako/pen/rZRvpW
Try using word-wrap and white-space, something of that in css, try console what does the work.
Try to put this css in your scss code.
.recommendations {
width: auto;
height: auto;
margin-top: 35px;
word-wrap: break-word;
}
I do have a table where I want to show the complete cell-content on hover.
I got this working with css, but now I'm facing a bug with all browsers except Chrome.
HTML extract:
<table><tr>
<td class="hover-text" style="width: 99px">
<div style="width: 99px">A long text</div>
</td>
</tr></table>
CSS extract:
.hover-text div{
text-overflow: ellipsis;
}
.hover-text:hover div{
overflow: visible;
z-index: 1;
width: auto !important;
position: absolute;
}
This works all fine, except if I use any browser but Chrome, there is just one row and there is a horizontal scroll-bar. Then the cells are strangely resized. Without one of this conditions, I got no problems. Unfortunately the HTML is given from the framework I use.
I tried all sort of things, but at this point I'm at a loss..
You can see this issue here if you resize the table so that there is no horizontal scroll-bar, everything works as expected.
Your td element has a class of "hover-text" whereas your CSS uses the selector .text-hover. This means that the CSS you've provided has no affect on the HTML you've provided.
To fix this, either change your td element's class to "text-hover" or change your CSS selectors to .hover-text.
I have adjusted your CSS, Now its working fine for me.
Working Demo
CSS
.hover-text div{
text-overflow: ellipsis;
overflow:hidden;
white-space:nowrap;
width:100%;
}
.hover-text:hover div{
overflow: visible;
z-index: 1;
width: auto !important;
position: absolute;
}
Please mind the names you keep in html markup and you use in css. Even a professional may confuse this way.
.hover-text div{
text-overflow: ellipsis;
}
.hover-text:hover div{
overflow: visible;
z-index: 1;
width: auto !important;
position: absolute;
}
Found a solution: http://jsfiddle.net/FmY5R/10/
td{
display: inline-block
}
But I'm still not sure what caused the bug..
Please visit this website.
There is a blank space at the bottom. I checked it and there is no minimum height mentioned in my css.
I suspect it's in the body's css details as below:
body {
line-height: 1.5;
font-size: 87.5%;
word-wrap: break-word;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
border: 0;
outline: 0;
background: none repeat scroll 0 0 #EFEFEF;
}
html, body, #page {
height: 100%;
}
This removed the bleed for me in Safari 6.0.3;
#footer-wrapper {
margin-top: 40px;
background: url("../images/footer.png") repeat-x scroll 0 0;
overflow: hidden;
}
You might want to handle that overflow differently tho, based on the content inside it. But this should fix the white space.
I figured it out by just deleting nodes from the DOM bottom-up. It had to be in the #footer-wrapper. As margin-bottom didn't work and you were using relative positioning I figured it was some shadow styling bleeding out of that element.
Update (better fix)
Just found the real issue to the problem;
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Change content: "."; to content: ""; and it's fixed. Or just remove that style at all, as it doesn't seem to have use in that case.
"overflow: hidden"
makes things harder but try,
"overflow: auto"
in order to be able to flow when you need.
I'm late to the show here but it may help somebody in my case I had an empty space at the top I added the margin-top=-20px now the empty space at the bottom, tried almost all suggestions I found on these and many threads and nothing. Decided to run it thru some HTML validator there are a few none of them pick up but after a couple one found an extra character(`) at the end of a tag, and that was it, so it was user clumsiness, took that thing out now my page was shifted, took the negative margin and all good. So try a validator and look for something like this.
margin-bottom: 0px;
This would do it
Btw ..nice site dude :)
Sometimes, it's some iframes/objects that are created by third party services that create this blank space. In my case, Google Adwords and Google Analytics was creating this. So, I removed by adding this CSS:
object[type="application/gas-events-cef"],
iframe[name="google_conversion_frame"] {
display: none !important;
height: 0 !important;
width: 0 !important;
line-height: 0 !important;
font-size: 0 !important;
margin-top: -13px;
float: left;
}
Maybe you will need to add some extra rules for your case. Hope that helps.
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
I have a line of code ( which is to long to be displayed in one line ) to be displayed on a web page in one line, just like above.
I don't it to be wrapped into two lines.
Can I accomplish this only using css?
To actually make this happen when you use words with spaces in between them overflow:auto is not enough, you'll also need text-overflow: nowrap.
http://jsfiddle.net/kZV3j/
Here's how SO's code block looks:
<pre>
<code>
<span>...</span>
</code>
</pre>
And the CSS:
pre {
overflow: auto;
}
Demo: http://jsfiddle.net/TfeLm/
I think you're looking for overflow:auto:
<div style="overflow:auto; width:200px;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
Create a containing element (e.g. a div), then set some basic CSS properties on it that define a width, and handle the overflow. Like this:
HTML
<div class="short">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
CSS:
.short {
width:400px;
padding: 10px;
overflow-x:scroll;
}
jsFiddle example. Works in all modern browsers and IE8.
I think you are looking for the overflow property with a auto value:
<style>pre { width: 200px; overflow: auto; }</style>
<pre><code><p>Some tooooo long text on one line</></code></pre>
Live example: http://jsbin.com/uhuveg/
I believe that you should use the following CSS
#id {
width: 400px;
padding: 5px;
background: #C3C3C3;
overflow-x: scroll
}
See this live example