In the demo below, I am trying to wrap text in small container (narrow browser width) and break the words with a hyphen.
There is a 5px padding but the right padding seems to be off screen along with some of the text.
DEMO:
https://jsbin.com/lajesilefi/edit?html,css,output
You have the propery word-break in there twice. Remove the second line
word-break:break-all;
word-break:break-word; <-- remove that line
Also as Germano Plebani suggests, remove those lines:
min-width: 100%;
width: 100%;
max-width: 100%;
Then it should work fine.
In addition to that I would suggest to use a margin instead of a padding in your #notification .ra-content block, so the last bit of the text does not disappear
https://jsbin.com/nudixewibu/1/edit?html,css,output
Related
Flexbox can be used to vertically align elements. But when a vertically-aligned element later grows, it can escape the bounds of its flexbox container. This happens even when overflow:auto is used on the element.
Here's a demo with some expected and actual results.
Using the demo:
Open the demo
Enter lots of text in the gray box
Expected result:
The paragraph becomes taller as text is entered. When the paragraph is as tall as its flexbox container, it stops growing and a vertical scrollbar is shown.
Actual result:
The paragraph becomes taller as text is entered, but never stops growing. It ultimately escapes the bounds of its flexbox container. A scrollbar is never shown.
Other notes:
It's tempting to put overflow:auto on the container instead, but that doesn't work as expected. Try it out. Enter lots of text and then scroll up. Notice that the top padding is gone and lines of text are missing.
You need to do the following:
Add "max-height: 100%" on the <p> element to keep it from growing indefinitely.
If you want to keep your padding on the <p>, you also need to set box-sizing: border-box to get its padding included in that max-height.
(Technically box-sizing:padding-box is what you want, but Chrome doesn't support that; so, border-box will do, because it's the same as the padding-box since there's no border.)
Here's your JS Fiddle with this fix
In your css you need to give height
p {
padding: 20px;
width: 100%;
background-color: #ccc;
outline: none;
height: 60px;
}
JS Fiddle
I tried adjusting the width in several places of my CSS, but the text keeps on flowing on one line and doesn't wrap within a "leftsidebar". There seems to be no limit as to how far my text goes to the right, and I want there to be a limit. How do I set that in CSS?
<h3> JKHJKHJKHKJHJKHJKHJKHKJHJKHJKHKJH</h3>
#leftsidebar {
position:fixed;
width: 160px;
top:150px;
margin:0px;
line-height:165%;
white-space:nowrap;
z-index:50;
padding: 0px 35px;
}
http://jsfiddle.net/4uxcN/
Remove white-space:nowrap; (and eventually add word-wrap: break-word; to respect your div boundaries with your no-spaced long word) to send the text to new lines;
add overflow-x: scroll; if you instead want the text in one single line but want to have an horizontal scrollbar inside your fixed width div: http://jsfiddle.net/4uxcN/10/
If you're talking about word-wrap: break-word property it will break the word when it reaches the end of the parent width.
Remove {white-space:nowrap;}, which forces your text to one line and add {word-wrap: break-word} to deal with your very long word.
http://jsfiddle.net/4uxcN/6/
#leftsidebar {
word-wrap: break-word;
}
Basically, there are 3 ways you can do it:
Just remove your white-space property. LINK
Remove white-space property, and add word-wrap: break-word; property. LINK
Set you white-space to pre-wrap instead of nowrap. LINK
If you remove
white-space:nowrap;
All text will break at the spaces to fit within the box width.
Super long strings like the one in you example will not break. To force stupid long strings to break you can use.
word-wrap:break-word;
also you could use an overflow property Like
overflow:scroll
It just really depends on the layout you are going for
Im trying to do some horizontal layout of divs but get an unwanted "margin" after the divs.
http://jsfiddle.net/Yzxpu/
When I change the the markup and delete the spaces or line breaks the problem gets fixed for the horizontal spacing, but still there is vertical spacing under the divs. And the markup looks bad.
http://jsfiddle.net/Yzxpu/1/
I don't want to see any red (except for the far right, it will get fixed as the right-margin % gets set)
I'm using latest Chrome as web browser.
By adding: margin:0; and padding:0; to the CSS it fixes the vertical issue, because browers add their own default settings you would be advised to use a reset.css sheet to set everything back to 0.
The fiddle with the fix: http://jsfiddle.net/ynemx/
Reset CSS: http://meyerweb.com/eric/tools/css/reset/
TRY THIS
http://jsfiddle.net/Yzxpu/10/
CHANGE YOUR CSS
#t-newsAndInfo{background-color:red; overflow:hidden}
#t-newsAndInfo div {float:left;}
REMOVE "DISPLAY" FROM #t-newsAndInfo div
You could try to float:left the inner divs:
http://jsfiddle.net/Yzxpu/15/
#t-newsAndInfo{background-color:red; overflow:hidden;}
#t-newsAndInfo div {
background-color:lightyellow;
display: inline-block;
float:left;
position: relative;
width: 31.11111111111111%;/*((900-(30+30))/3)/900*/
height: 100px;
text-align: center;
/*margin-right: 3.111111111%;*/
/*margin-right: 2.99999999999%;*/
}
I have an inline element with a line break in it. It has padding on all sides. However, the side padding on where the line break cuts the element is not there.
This is what i mean:
http://jsfiddle.net/4Gs2E/
There should be 20px padding on the right of tag and left of with but there isnt.
The only other way I can see this working is if i create a new element for every line but this content will be dynamically generated and will not be in a fixed width container so i dont see that working out. Is there any other way I can do this in css without any javascript?
I want the final result to look like this :
http://jsfiddle.net/GNsw3/
but without any extra elements
i also need this to work with display inline only as I want the background to wrap around the text as inline block doesnt do this
Is this possible?
edit, altered the examples to make what i want more visible:
current
http://jsfiddle.net/4Gs2E/2/
what i want it to look like
http://jsfiddle.net/GNsw3/1/
In some cases you can use box-shadow for a workaround.
Move the right and left padding of the element to its parent and add two box-shadows.
The result: http://jsfiddle.net/FpLCt/1/
Browser support for box-shadow: http://caniuse.com/css-boxshadow
Update:
There is also a new css property for this issue called box-decoration-break. It is currently only supported by opera, but hopefully more browsers will implement this soon.
Hope this helps
Found a solution for you, but it ain't pretty :)
Since you can't target the <br> element with css, you have to use javascript. Here's how you can accomplish what you want with jQuery:
// Add two spaces before and after any <br /> tag
$('br').replaceWith(' <br /> ');
Play with the number of elements to acheive your padding on both ends.
Here's an updated Fiddle demo:
http://jsfiddle.net/4Gs2E/8/
Maybe you can use float: left instead of display: inline:
http://jsfiddle.net/GolezTrol/4Gs2E/1/
Usually that is implemented by wrapping each word in an own SPAN which has border.
I just wanted to make css-animated menu for myself. Workaround I have found is to wrap your INLINE-BLOCK element (change in css if necessary, lets call it a span with such an attribute for purpose of this solution) into block element. Then I'm using margins of span as it was padding for the surrounding div.
div.menuopt {
margin: 10px;
padding: 0px;
padding-left: 0px;
overflow: hidden;
width: 500px;
height: 150px;
background: grey;
}
span.menuopt {
display: inline-block;
margin: 0px;
padding: 0px;
margin-left: 150px;
margin-top: 10px;
font-size: 25px;
}
Example:
http://jsfiddle.net/ApbQS/
hope it will help anyone
I have tried using firebug to locate the problem, but cannot find the solution to the following at this url :
How to get rid of the space between the image and the text? For example, the gap between the image of lego-like bags and the text "AboveHere Concept"
How to align these two social buttons in one line? I have set the twitternews class width to 90px and the facebooknews iframe to a width of 90px, but this does not work. I also have these two buttons in a block with a width set to 200px, but this does not seem to work either.
your
<p>
tags in the post-body divs have a top and bottom margin of 1em. that's why there's a lot of space in there. take those out
.post-body p {
margin: 0;
}
you need to set .facebooknews div to have a smaller width, not the iframe
div.grid-item .facebooknews {
clear: none;
float: left;
padding-right: 5px;
width: 100px;
}
1) Add the style margin-top: 0px to the P tag that the "AboveHere Concept" text is in. Also remove the <br> thats right before the text. It will move everything up.
2) facebooknews add a width: 100px; and it will fit.