I have a very normal div and inside I have some text. the div is styles with test-align:center;and have a fixed width of 360px. The problem is when I try and enter some text without any spaces between words, the whole document would not break and commit to the div's width, it would just get out of the div's width I set it.
I know that in a real life situation no one would write a document without any spaces between words, but I just want to achieve this.
HTML
<div class="wrapper">SomeDummyTextWithNoSpaceInBetwenn</div>
CSS
width:350px;
display: block;
margin: 10px;
text-align: center;
You can style the way text wraps inside a div with CSS using word-wrap:breakword
div{ width:360px; background:#555; color:#eee }
#withWordWrap{ word-wrap:break-word }
<div id="withoutWordWrap">
ThisIsSomeTextWithoutAnySpacesAtallInsideThisDivThisIsSomeTextWithoutAnySpacesAtallInsideThisDiv
</div>
<br><br>
<div id="withWordWrap">
ThisIsSomeTextWithoutAnySpacesAtallInsideThisDivThisIsSomeTextWithoutAnySpacesAtallInsideThisDiv
</div>
You can use word-wrap: break-word;
Related
When you do something like:
.container {
column-width: 200px;
height: 300px;
}
<div class="container">
... a lot of text...
</div>
If the text is large enough it will cause that the corresponding text overflows the container width to the right. That's awesome if you want an horizontal layout, however, the div width won't grow because the text has "overflow" the container. If you put a background to the div you will see that the background won't be there after the end of the screen (if the text is sufficienty large). That why, if you put a second div next to this one in an horizontal fashion, the second will be over the overflowed content of the first div, which is undesirable.
The question is: how can I make the first div be adjusted to the content inside him no matter how large it becomes in the horizontal line?
I would probably do it like this (if i understood what you want)
.container {
width: auto;
height: 300px;
}
.text{
Padding-left: 10%;
Padding-right: 10%;
}
<div class="container">
<div class="text">
... a lot of text...
</div>
</div
The container should now change size depending on the text. :)
With CSS3 Intrinsic Sizing, you can use this: width: max-content which expands the width of the parent container based on text it encloses.
Caution - not supported in IE. Check this: https://caniuse.com/#search=max-content
HTML
<div>Test</div>
CSS
div {
text-align: center;
width:200px;
margin-left:20px;
}
I don't want to have the text at center but pushed slightly right/left. Is this possible?
If it's a single line you should be able to do this:
text-indent:1em;
ref: https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent
It is possible. Currently your margin-left property will affect the div and does not specifically target the inner text.
I would do something like the following. If you surround the text in a <p> tag you can offset it to the left or right by using padding.
div {
text-align: center;
width:200px;
background:blue;
}
div p{
padding-left:30px;
}
<div>
<p>Test</p>
</div>
If you use padding on one side, it will offset the text visually by whatever you set it to. What you have listed would work, as would using padding instead of a margin, but it depends on what the site looks like visually.
Incredibly simple piece of HTML - but not displaying how I would expect.
I'm trying to create an empty div that displays as whitespace on the top of the page, with style="height: 400px;"
Even though I have specified a height, my empty div will not display. What am I missing here?
UPDATE: my main question is: Why does an empty div not display even if it has a height set? Or, what are the basic style rules needed to display an empty div?
Full code:
<html>
<head><title>Site Name</title>
</head>
<body>
<div style="height:400px; width:100%; margin:0; padding:0; position:absolute;"></div>
<div style="width: 50%; margin: auto;">
<img src="logo.gif"></div>
<div style="width: 50%; margin: auto;"></div>
</body>
</html>
If you just want to add white space try this
<div style="height:400px; width:100%; clear:both;"></div>
FIDDLE
or you could just add padding to the body like body { padding-top: 400px; }
The css style you are looking for is min-height: 20px; By default a div without content will have a height of 0 due to the auto setting being the default which sizes itself to fit content.
For who looking for a white space (not exactly an empty div) you can add an empty span so the div is no more considered as empty one.
Avoid using because the default font-size can make the div higher than you want.
div{
height:100px;
background:#ff8800;
}
<div><span></span></div>
You need to add a background so you can see the white box.
background-color:black;
You won't be able to see it.
The reason it did not display is because you had position:absolute in your style. That means that div will be positioned independently of the other elements, and have no effect on the div that follows. So your second div is essentially the first div on the screen.
Add some whitespace to your div and it will work.
<div style="height:400px; width:100%"> </div>
I want to create a header with a few words aligned to the far left of the header div and a few words aligned to the far right. I initially did this by creating spans (.headerLeft and .headerRight) and adjusting the alignment for the portions I wanted aligned. However, this creates problems if I want a background-color for my header div. Is the best practice solution here to simply add a little inline CSS styling, or is there a better way?
My Code (example)
HTML
<div class="header">
<span class="headerLeft">Welcome to .</span>
<span class="headerRight">Login | Register</span>
</div>
CSS
.header {
width:100%
position:fixed;
top:0;
margin-top:0;
background-color:red;
text-color:#C14000;
}
.headerLeft {
float:left;
text-align:left;
}
.headerRight {
float:right;
text-align:right;
}
#header {
overflow: hidden;
}
This code will fix your problem. The height of #header will automatically take the height from the tallest element inside #header.
Another way would be to manually set the height for #header.
You don't need to style sth inline :)
You need to set the overflow attribute for the header class to force it to wrap around the inner spans. see http://jsfiddle.net/PsychegoPro/rnDT8/
You need to clear the floats in order for the div to have actual height.
This can be achieved by using clearfix. What is a clearfix?
I got a little problem with the div width.
I show you an image of what I have
.
There is an outside div that has no specified width, it can be small or big.
On the right we got a image that floats on the right.
The text div contains a dynamic width that fills all the undefined width space. and inside a undefined width text.
What I want is that the overflow of the Text Div is hidden when the text width is more then the Text Div space.
The problem is how to specify a width to get the overflow on a dynamic width ?
If I don't specify any width, the image will go under the text if it's too long.
I hope I was clear enough.
Thank you for your help.
Edit:
Here is a bit of code to be more clear.
<div class="outside">
<img src="img.jpg" class="img"/>
<div class="text"><p>some text that is too long</p></div>
</div>
<style>
.img {
float: right;
}
.text {
float: left;
overflow: hidden;
}
</style>
The problem is that .text doesn't have any specific width, so the overflow doesn't work
DEMO HERE
so let me get this straight:
you want the text to be clipped when they overflow
however, you want to set limits using the div where it's contained (which is dynamic)
try this
<div class="container">
<img src="myimage.jpg" />
<div class="flexi"> some long content</div>
</div>
img{
float:right;
}
.container{
overflow:hidden;
zoom:1;
}
.flexi{
white-space: nowrap;
overflow:hidden;
zoom:1;
}
There are many solutions:
One example:
http://jsfiddle.net/SHYZR/
As per my understanding, you want that as and when your DIV is filled out by some text, its width should be increased respectively. try out this :
div
{
width:150px;
height:150px;
overflow:hidden;
}
Using this, your overflowed text which goes beyond 150px will not be displayed.
You can fix the width of Text div to occupy a percentage of outer div and leave the remaining space for the image depending on your image size.
Check here
edited to put the correct link.