to make it simple, i've got following code:
<div>
<a>view all your links</a>
</div>
the width of the div is very small so the text "all your links" sticks out of the div. how do i do to have a new line after "all your" so "links" dont stick out?
If you want to break links visually so they don't extend out of a div, you can add word-wrap: break-word to a in your stylesheet. Thus:
a {
word-wrap: break-word;
}
You have not specified your desired result. Do you want the div to resize to accomodate the entire width of the links? If so, don't put a fixed width on it or any of its ancestor elements. Do you want the overlong links to be cut off? If so, put overflow: hidden in the style of the div.
Use the max-width property for your a links.
Edit: You'll likely need a display: block for your a tag as well.
Use this code:
a {
word-wrap: break-word;
white-space: normal;
}
Related
I am trying to use the CSS property word-wrap with the value break-word in a div.
It works perfectly, but only if I specify the width (and if this one values auto, word-wrap does not work).
The problem is that I want the div to be resizable, so I can't type a specific width for the div at the beginning.
Any ideas to solve this, please? I do not want to use hyphens.
Thank you in advance.
This does not work:
<p style="word-wrap: break-word !important;">loooooooooong_word</p>
This works OK:
<p style="width:100px; word-wrap: break-word !important;">loooooooooong_word</p>
Fiddle
Try to set width:inherit or width:100%
In order for text in a div to wrap you have to specify the white-space CSS property for that div.
Set it to pre-wrap or normal.
eg. Text Wrap
Also you can specify the text-align:justify property if you want the text to appear to be as in newspaper columns.
eg. Justify
<p>loooooooooooong_word</p>
<p style="word-wrap: break-word !important;">loooooooooong_word</p>
<p style="width: 100px; word-wrap: break-word !important;">loooooooooong_word</p>
Fiddle
Try resizing the browser the word wrap works fine...!! you can find the difference between the <p> tad without and with sytle and with fixed pixel
To be more clear the computer is dumb and if you want to break a word you should be specifying the condition at which the word should be broken. without giving the condition how you expect the output?
You could try using the overflow-wrap property to get the word to break.
Further, you could set a limit on resizing by applying a min-width/min-height to the parent container.
Using your example, this is what I mean:
<div style="resize: both; overflow: hidden; min-height: 100px; min-width: 100px; border: 2px dashed black; padding: 5px;">
<p style="overflow-wrap: break-word;">loooooooooooong_word</p>
<p style="overflow-wrap: break-word;">loooooooooooong_word</p>
</div>
There are my codes. (jsfiddle)
Why this part of my codes isn't running?
header{background-color: #2bd5ec;}
I want to add background color to header tag. What i need to do?
The issue here is that since the elements inside your header are floated, they're considered in a different flow than your header, and thus it doesn't resize to fit them.
One way to fix this is to append <div style = "clear: both;"></div> to your header; little demo: little link.
You can also just add overflow: hidden; to your header: another little link, or float it as well: yet another little link.
you can set Height for Header.
for example :
header{background-color: red; height:100px;}
and you can use "clear" like this :
<header>
<div id="info">
<h1>Oyunn.in</h1>
</div>
<div id="categories">
<p>Barbie - Benten - Senten</p>
</div>
<br clear="all"/>
</header>
and css:
header{background-color: #2bd5ec;}
#info{float: left;}
#info h1{font-size: 100%;margin: 0;}
#categories{float: right;}
#categories p{margin:0;}
use overflow:hidden
header{background-color: #2bd5ec; overflow:hidden;}
The overflow CSS property specifies whether to clip content, render scroll bars or display overflow content of a block-level element.
Using the overflow property with a value different than visible, its default, will create a new block formatting context. This is technically necessary as if a float would intersect with the scrolling element it would force to rewrap the content of the scrollable element around intruding floats. The rewrap would happen after each scroll step and would be lead to a far too slow scrolling experience. Note that, by programmatically setting scrollTop to the relevant HTML element, even when overflow has the hidden value an element may need to scroll.
The overflow declaration tells the browser what to do with content that doesn't fit in a box. This assumes the box has a height: if it doesn't, it becomes as high as necessary to contain its contents, and the overflow declaration is useless.
SEE DEMO
Add
header{background-color: #2bd5ec;width:100%; height:30px;}
Background attribute usually needs div's dimensions
actually you didn't clear your child floats so whenever we are using float so we should clear the floats and we can give overflow: hidden; in our parent div to clearing the child floated div's.
header {
background-color: #2BD5EC;
overflow: hidden;
}
see the demo:- http://jsfiddle.net/vE8rd/17/
So the problem is when you have a block of text, and an image that is slightly too tall that you want to place in-line with the text. For example, a smiley. It will cause the line height of that line of the paragraph to grow, making the block of text look ugly.
I've actually already come up with a solution, but it's messy and I don't like it... If I wrap the smiley in a relatively-positioned div, and give it an absolute position I get the effect that I'm after:
.holder{display:inline-block;position:relative;width:16px}
.holder img{position:absolute;top:-16px}
<span class="holder"><img src="/smiley.gif" height="16" width="16"></span>
But it adds extra markup. Is there any way to achieve this without adding extra HTML elements - a pure CSS solution (no javascript!)
I wonder if I'm missing some application of overflow/vertical-align/float/display etc?
Many thanks!
Depending on the desired image position and whether you have a fixed line-height in pixels you could set a maximum height on your image that equals your line-height and set vertical-align: bottom on the image so it fits exactly into your line.
See this fiddle for an example.
p {
line-height: 18px;
}
p img {
max-height: 18px;
vertical-align: bottom;
}
<p>Some text <img src="/smiley.gif"> more text.</p>
Set the image as a background of a DIV and give the DIV fixed dimensions.
<div class="smiley"></div>
CSS:
.smiley {
float:right; <-- or inline-block if you want.
background-image:url(../smiley.gif);
height:20px;
width:20px;
}
To explain my problem, I'm trying to make a div wide enough to accommodate a dynamically generated title without wrapping it, but the div also has other content, which I want to wrap.
In other words:
CSS:
.box {
min-width:170px;
}
.box span.title {
font-size:24px;
white-space: nowrap;
}
.box span.text{
font-size:10px;
white-space: normal;
}
HTML:
<div class="box">
<span class="title">Title on one line</span><br />
<span class="text">This is the main body of text which I want to wrap as
required and have no effect on the width of the div.</span>
</div>
However, this is causing the div to expand to be wide enough to contain the main body of text on one line, which I want to wrap. I've tried various arrangements for CSS and the putting them all inside container divs and the like but I can't seem to get the box to be exactly wide enough to contain only the title without wrapping (but not less than the min width)
Is there any way to do this just in CSS? Note I don't want to set a max width as this just causes it to become a static size again, as the main body of text is always going to be enough to hit the max width. I also can't line break the body manually as it's dynamically generated.
Is this (jsFiddle) what you're trying to accomplish?
I just added display: table; to .box's CSS. This expands the main div to the width of the title span but wraps the text span.
Note: You can also set a constant width to prevent the div from expanding to the width of the window. This way it will still expand to the width of the title if it is larger than your constant width, but will not grow if the user drags out the window. In my example I added width: 100px; to demonstrate.
A working jQuery example:
http://jsfiddle.net/8AFcv/
$(function() {
$(".box").width($(".title").width());
})
For headlines you should use the <hN> tags (<h1>, <h2> etc).
For no text wrap:
white-space: nowrap;
On the element who's text you don't want to wrap.
Working Example on jsFiddle
If i understand your correctly you can easily set the same width for yours text as for yours title using JS or jQuery, for ex:
$('.text').width($('.title').width())
and run it at jQuery(document).ready or by event if you add it dynamically
Block elements such as divs extend as far as content pushes them, unless specified by explicit widths or heights.
A pure CSS solution for this is unlikely without setting a max-width on the div.
A pointer on CSS:
Don't include the tags in your selectors (i.e. tag.class) as you are then forced to use that tag with that class. Simply using .class will make it easier to change your markup (should you need to) as well as make your class extend its use to more than a single tag.
hi how can i make the text inside div coming to the next line if the text covers the width of contenteditable="true"
Just like gmail chat when some one writes anything inside div then it automatically moves to next line
I am talking about the contentEditable="true" div means the div in which we can edit or write text.
.break-word {
word-wrap: break-word;
}
Sometimes it is not enough using "word-wrap : break-word".
.break-word {
word-wrap: break-word;
display:flex;
}