I'm going to jump straight to the point with giving you the example fiddle, the problem will make itself clear. Instructions: click on the paragraph in order to change its textual content (via javascript) and then input something a bit longer (like 150+ chars) but as a single word. For example, replace the initial content with a text like LONGTEXTLONGTEXTLONGTEXTLONGTEXTLONGTEXTLONGTEXT... etc and you'll see the table stretches in a very strange way, although I've set max width and height for my paragraph and made overflow scrollable. I'd like to know what's causing that and what would be the best way to prevent it. Thanks in advance!
https://jsfiddle.net/aekjguj2/1/
The paragraph needs one more thing: word-break: break-all.
<p id="description_changer" class="clickEdit"
style="max-width: 100%; max-height: 100px;
overflow-y: scroll; word-break: break-all;">
Click to dynamically replace me with a long single word content
</p>
Related
I have a large number of instances on my site where ive got an image floated to the side of text. When the text is long enough to wrap below the image I dont want it to take up the full width of the div, instead I want all the text to stay vertically aligned.
I can do this by setting overflow auto to the p tag. Ive had to do this so many times im considering making this rule global for all p tags. What the risks / down sides to doing this? Ive done it as a test and had a quick look and everything looks fine.
<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/5/5b/Ultraviolet_image_of_the_Cygnus_Loop_Nebula_crop.jpg" />
<p>Here is my text Here is my text Here is my text Here is my text Here is my text Here is my text Here is my text Here is my text Here is my text Here is my text Here is my text Here is my text Here is my text Here is my text Here is my text</p>
</div>
img {
width: 200px;
height: 200px;
float: left;
}
div {
width: 300px;
margin: auto;
}
p {
overflow: auto;
}
http://codepen.io/anon/pen/kdbJp
This is, as always, a judgement call. In my experience, styling tags directly will lead to unintentional side effects and make long term maintenance harder. (What if you actually need a 'p' tag to be a paragraph later?
My recommendation would be to use a class on the div and preface all the relevant selectors with it. Also look in to the new html5 tags 'figure' and 'figcaption'.
.media-box {
width: 300px;
margin: auto;
}
.media-box img {
/* ... */
}
.media-box p {
/* ... */
}
Because the spec says that overflow:auto is user agent-dependent, the risk of doing this is that it not achieve the desired behaviour in all browsers. Also, you may see scroll bars on some browsers because the spec recommends that behaviour for overflowing elements.
auto
The behavior of the 'auto' value is user agent-dependent, but should cause a scrolling mechanism to be provided for overflowing boxes.
http://www.w3.org/TR/CSS21/visufx.html#overflow
The way this works is by creating a new block formatting context.
Also, found a Quirks Mode article about it. Seems to mention that setting a width or height is important for correct functionality in some browsers.
The risks/downsides would be in the case that you don't want the above behaviour, you will then have to replace the overflow: auto on those <p> tags that you want a different behaviour on.
The questions I would ask myself are:
Who is going to be maintaining/developing this site in the future?
Are they likely to want their <p> tags to behave this same way?
Is it easy for them to override the behaviour?
In most cases I would favour a simple CSS class that I can apply to the <p> tags myself. Any future developer will be able to see the classes applied to the p tags and copy the behaviour. Anyone who wants a normal <p> just doesn't apply that class.
I would only favour blanket element selectors like this for theme type styling (i.e. "I want ALL <p> tags to look a certain way on this website". If you don't want that, I would faviour creating a class specifically for the prupose with a nice descriptive name.
The choice, however, is ultimately yours.
overflow:auto on paragraphs is bad practice. A paragraphs nature is to wrap around. There are a number of techniques you could use here. But I would just set the paragraph and image to their own widths so that they each only take up a certain amount of space.
article
img
p
article img{float: left, width: 20%}
article p{float: left, width: 80%}
This would be your best practice, and that is because this allows your elements to only take up the specified width that you have requested, and no more, no less. Without overwriting other elements space. In honest, there is no real need for overflow:anything
http://jsfiddle.net/5njNa/
I often have an image that I wrap text around, and sometimes the texts wraps awkwardly, like so:
In the HTML, the image is floated to the left and the text simply follows:
<p><img style="float:left;" src="/images/[image]" /></p>
<p>This is my David Copperfield, <em>I was born</em> kind of bio. For a more concise one, please see the press kit.</p>
...
This mostly works, except when the text length just happens to run past the bottom of the image and flow back to the left margin, and when the amount of text isn't long enough to fill more than one line (in this case, it's only one word). When that happens, it looks really bad.
So, is there a way to control the text flow so that this doesn't happen?
What you could do is add overflow: hidden to the p tags where there is text. This will make it so any text that wraps after the image will be in line with the larger part. Now when you have large paragraphs this may look funny, however if your paragraphs are all fairly short this should help.
Example: http://jsfiddle.net/8ZsKy/2/
alternately you could just add a class rule and apply it to potential "problem" paragraphs.
p.wrap-inline {
overflow:hidden;
}
EDIT: updated jsfiddle (oops)
This question actually had me thinking although it is actually annoying sometimes, In the past i have fixed similar problems to this by adjusting the line height a little,
line-height:20px;
or adjusting the actual size of the image a little bigger or smaller,
<img style="float:left;" src="/images/[image]" width="100" height="200" />
or alter the tracking of the text
letter-spacing: 0.1em;
or use hyphenation (I don't like it or recommend it)
hyphens: auto;
However as far as my knowledge goes i do not know of any css rules to eliminate text orphans. There might be scripts but i have never heard of it and have doen a bit of research on it a while back. Hope it helped :)
This is how floating works. If you don’t want that, don’t use float; you can e.g. use positioning instead, so that the text appears as a block on the right of the image.
There’s unfortunately no way to use floating and request e.g. that the last line should not be short. You can prevent the very last word from appearing on a line of its own by using a no-break space between it and the preceding word, e.g. it will. And you could extend this to a group of short words. But this would just mean that the group appears on a line of its own and the preceding line is correspondingly shorter (and may therefore look odd).
If the text is just a little too long, you could modify its rendering to take less space vertically e.g. by removing empty lines between paragraphs, though this would be a major layout change (though perhaps a good one):
p { margin: 0 }
p + p { text-indent: 1.3em; }
<img style="float:left; clear="both" src="/images/[image]" />
I have a problem that div doesn't fit content when it contain long words. It just take max-width.
Screenshot:
http://img687.imageshack.us/img687/3253/photondf.png
I want div to take same width as content without javaScript.
HTML
<div class="div">
<p>fkjdajfkdjfkdjfkdfjkdfjkdfjdfdjkfkjfdkdfioiewtiovvuiocuvicxvocxvuiocxvucioxbuvbhxjk
civuiozxviopucvicvuvjcizoxvopcxvpiovxzijpvxzicovpzvjijopcvzxpvjiocvpjzvicvzpjvci.</p>
<div>
CSS
.div {
float: left;
background:red;
max-width: 900px;
}
What exactly trying to get the div to do? Did you want it to scale down to the size of the content but be no bigger than 900px?
Try width: auto; but keep max-width if you don't want your div to be larger than 900px.
Well well, there are couple of problems here.
The content in p doesn't have any space at all. In other word, it won't be able to "split" the word on multiple rows. And your div does actually have the correct width.
Unless you really don't want to split it over multiple lines. You can define overflow on the div to either auto or hidden. In this case, auto will add scrollbars and hidden will simply hide the content that goes over.
If overflow on either the p or the div, You can actually force word-wrapping in css3: http://www.w3schools.com/cssref/css3_pr_word-wrap.asp
Since you defined a width for the div, it really always used that width and never more. (Don't count the overflowing text as bigger than the div). The overflowing text shouldn't be taken into account when calculating layout size and position of other div around this one.
Btw, a really long string like that isn't really a good "use case" if you have problem when there are actually spaces. You should paste it here instead of that.
edit
Your div can't "fit" the content with long words, it will spread to the maximum width possible and then when the maximum width is reached, it will wrap to an other line. If the word is bigger than the div it will overflow.
edit 2
If you really want to do that, there is a way. But this is quite ugly. You'll have to add a <br /> after each long words. If you're passing the text within a template engine, you can even make the <br /> replace your spaces with css. But to be honest, just don't do that.
I have a box where user activity will be inside.
Now I am having two issues.
The first one is that i have a float left element, and when this ends the text also goes at left. (issue1)
The second is that if you type in a non-breaking word/sentence, like eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee it wont break it and go under, but allows it going to the right, like it do not listen to the width specified.
Here is live of both issues:
http://jsfiddle.net/AB4Ls/5/
Help please, how can I solve this, and why is this happening?
For first issue set element that contains text to be displayed as block and give it left-margin amount of floated element width.
display: block;
margin-left: 40px; /* adjust to your needs */
For second issue check this url: http://perishablepress.com/press/2010/06/01/wrapping-content/
Explanation is to long to repeat it here.
Are you sure it is possible you have such long words?
If true you can use css3 property word-wrap or parse words with php before displaying it.
I think you're saying that you want the text in the issue 1 to NOT flow back under your image that you've floated to the left.
If so, just surround the text with a div tag and use display: table-cell. This will put a "rigid border" if you will, around your text.
I have this code:
<div id="body" style="height: 295px; width: 427px; position: absolute; top: 261px; left: 284px;">
<div id="header">
Some dynamic text<br/>
Some dynamic text<br/>
</div>
<div id="Content">
<textarea id="text" style="width: 100%"> </textarea>
<input type="file" style="width: 100%">
</div>
<div>
</div>
I want to set content div to fill remaining space of its parent. The text is generated server side and it causes the height of the header to change.
The output should look like this: file input should be at the bottom of the content with text input filling remaining of the Content. Content itself fills remaining of the Body, which height is influenced by dynamic text.
I am interested only in CSS solution, as this is easy to do with JS. Also, only width and height of the Body div can be hardcoded.
EDIT:
Some clarifications:
Body is fixed size
Header is dynamic size, can be of any height. If its height > #Body.height, the rest will be cropped and #Content height will be 0. Alternativelly, if possible, #Header could be limited to max half of the #Body with the rest cropped or scrollable.
Content doesn't need any special clarification. It contains of fixed file input and dynamicly height textarea
Thx.
here is a test page showing the html in question:
http://programmingdrunk.com/test.htm
ive taken the liberty to adding colored borders to see what is going on.
edit: now the above link has a solution. it looks a bit strange in firefox, ill see if i can fix that
edit 2:
final solution as can be seen in the link above is this (let me know if i misread your spec)
#text, #Content {
height:86%;
}
I can't understand how such a basic thing as control anchoring (or docking) is not something you can do in CSS. The language that is used for presentation not having fundamental thing is just insane...
Anyway, the above thing probably can not be done in CSS as CSS element is not aware of other elements. Or maybe it can, but such solution will certanly include CSS hacks.
I settled with JQuery LayoutManager framework for now.
Adding float:left to #header will cause #content to fill remaining space, not sure how to achieve the text area though.
Your html makes it really really hard to do what you want. Also, you have not told us what should happen if the content is too high to fit one screen.
Your description makes it sound a bit like you'd want something like:
http://www.sitepoint.com/blogs/2005/10/18/the-catfish-part-1/
In order to get good replies, please consider changing of the html structure.
EDIT:
Okay, what you want is just not doable if you want ie to behave. If we drop ie or no-js limitations, then there is a small chance in doing this with table-style layouts. But this is really weird request and you should consider really hard why do you want to do it like this at all.