I have a div that is of fixed width, 300px. I have user inputed text that needs to go into the div. The issue is, is that people are putting the word "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" into the div. This causes the text to exceed the width of the div. What I would like is for the text to wrap even if there is no spaces in the words. Is there a way to do this with css? I tried the css white-space property but it was not working.
If anyone has a solution or a point in the the right direction would be wonderful.
Try this:
word-wrap:break-word;
There is no way to do this properly, with the current state of the art. Line breaking rules are complex and vary by language.
Using word-wrap:break-word or some of its va
riants arbitrarily breaks a string of characte
rs and almost certainly breaks the rules of th
e language and confuses people.
Related
I have a line of copy that is managed in a Content Management System. The CMS will not allow HTML or special characters like or <span>.
I've tried messing with margins and padding, but can't get anything to give me the intended result.
This is how the text is being rendered:
<h1>This is an example of the headline.</h1>
I want to prevent a widow (a lone word that appears at the bottom of a block of text) so when the line does break, it treats the last 2 words as 1 word.
For example, "the headline" would break to the next line instead of just "headline" all alone.
Is there a way to do this in CSS alone?
I would love to see "white-space: no-widow" in CSS, but that doesn't exist.
Short answer: no, there's no way to do this that i know of.
if you could wrap those last two words in a span with a no-wrap style on it that might work. But I see you can't add a span in your CMS.
One thing you could do:
set the width of the h1 in em units, so that its width is proportionate to the size of the text. This way you can set a width that forces the title to break where you want it to, and that width will scale with the text.
This is a very basic html-css query that I often encounter. Most times, I find the solution some way or the other, but am interested to know the reason of this unexpected behavior(as per me) of UI.
Please have a look at this fiddle: http://jsfiddle.net/2yaRU/
<div > //float left
Sometext <span> text<.span>//float:right
<div>
the right floated text moves to the next line though there is a lot of width available in my line. Ideally as per me, the text should appear side by side with float:left as left side, and float:right at right side within the div.
This cant be a complex issue, so is there something very common I do not get here?
Put the floated item first. The floats are nested inside of each-other, so they won't affect each-other. Floating an element automatically changes it display:block;
I think there's a couple things going on. Since the wrap is float:left, it switches to a block formatting context. It looks like the issue is that the whitespace that comes after the text (just before the nested float) is considered to be trailing since there is nothing is in the flow after it. So the width of the parent does not take into account the space, even though it does take up space when the layout is rendered as you can see in the html.
Removing the trailing space brings the X back onto the same line as the text.
http://jsfiddle.net/2yaRU/8/
If you want a space after the text, you should add a non-breaking space ( ) to the html instead.
http://jsfiddle.net/2yaRU/9/
.....which makes sense.
However, is there a way to limit the amount of space that a paragraph for example takes up? Right now, if someone resizes the page, the text wraps and the elements overlap each other, and I understand that it is just working as designed.
I was able to get a no-wrap successful set up using a table as a whole page layout, but that just caused other issues.
How can I get it so that the text doesnt move without using the no-wrap option. Should I put the p tag in it's own div? or span?
I'm sorry, this may be simple, but I cannot find a good answer. If I wrap, they overlap. If I no-wrap, it...well...no-wraps, but all I am looking for is for it to stay within the parameters of the page, and not resize when the page resizes. Ideas? Feel free to shake your head - just looking for some relief from the confusion haha
I'm not sure if i fully understand the question, but you could try selecting the surrounding div and applying the following css.
selector{
display:inline-block;
width: 100px;
}
Set the width to the size you want, before the wrap
Long inputs in my site overflow out of the div and the allowed width.
I read that it's because the browser will only insert line breaks if there are spaces.
Since my site is all about user-input, that could mess up with things.
I wanted to know if there's a way to still limit the width even if the input has no spaces in it.
I recomend you to use overflow:auto instead, to your div. It may give you better result.
Make your div scrollable so all overflowing content doesn't break the layout but scrolls instead.
<div style="overflow:scroll;">...</div>
Yea, word wrap breaks lines on word boundaries. If you don't have word boundaries, then that's going to be an issue.
So don't rely on word-wrap, but make your containers scrollable with overflow: scroll and friends in CSS.
Basically its a 2 column setup, with a dynamic width content column, and a static width menu column.
The content column is going to contain pre-tags (with code), and I need overflow:auto on the pre-tag inside the table to work.
So far I've had little luck. The nature of the pre tag forces a certain size on the table cell, which in turn refuses to be any smaller than the width of the pre tag.
Can anyone help out?
Ps. I've placed a second pre-tag on the page, which works as intended, but thats probably because it's not inside a table.
Add white-space: pre-wrap; to the element. max-width:100% may help too.
I found an acceptable solution.
The solution is a negative right margin for the pre (code) element.
Basically, a negative right margin will force the pre to shrink if it needs to.
I made margin-right -800px, and the width 97%.
I noticed that the width, paddings and borders need tweaking if to look good at all resolutions, but the solution works.
A simple solution that was hard to dream up.
[EDIT]
There was a link to an example, but it has been taken down.