|
CSS - Word Wrap
is there another way to make text wrap and not expand the div? i.e a div 200px wide expands if too much text is put in the box. On other websites I have seen this happening and looked at the code but I couldn't see anything I wasn't doing? The only way I can fix it is by adding this to the css:
word-wrap: break-word; surely there is another way??? This isn't a problem I just am interested to find out how else you can do it because I can't work out how else you can do it thanks Similar TutorialsHey all! I'm having a major word-wrap issue in IE and it's driving me bonkers. I've tried to research it, but couldn't find anything. Most of the problems people have with word-wrap are in FF, but I'm having noooo problems with it FF. I have a left nav for the site I'm building and I'm forcing a word break at 125px. In FF and IE, it forces the word break just fine. However, in IE, it also bumps out the width of the above div tag to what the width would be if the tag wasn't forced to break. It looks like all the div tags are the correct width, but the #col1 td tag won't allow a max-width. That's what I'm thinking anyway. Here's how it is in IE (ignore the borders): http://www.abellefeuille.com/mg/Untitled-3.gif Here's how it's supposed to look (again, ignore the borders): http://www.abellefeuille.com/mg/Untitled-3-FF.gif Here's the code: CSS: Code: #col1{width:148px;
vertical-align:top;
color:#666666;
font-size:12px;
padding-top:20px;
padding-bottom:20px;
}
.view_ln{max-width:125px;color:#333333;font-size:11px;font-weight:bold;padding:2px 0px 2px 0px;}
.view_ln h1{word-wrap:break-word;}
HTML: Code: <td id="col1" style="border:1px solid green;">
<!-- viewing -->
<div id="view" style="border:1px solid blue;">
<div class="ln-title">Viewing</div>
<div id="ln_keyword" class="view_ln">
<span class="line">Activity:</span><br/>
<h1>ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppa</h1> <a href="" class="x-search">(<span>x</span>)</a>
</div>
<div id="ln_brnd" class="view_ln">
<span class="line">Brand:</span><br/>
<h1>Marmot</h1> <a href="" class="x-search">(<span>x</span>)</a>
</div></td>
Any advice will be most appreciated. THANKS!! Hi all, How do you wrap text in a div from the x-coordinate but the y-coordinate must have a scroll bar. CSS Code: Original - CSS Code .leftHand { height:300px; overflow-y:scroll; position:relative; width:550px; background-color:#F7FAFC; word-wrap:break-word; display: block; }
HTML Code: Original - HTML Code <div class="leftHand" id="leftHand"> </div> <div class="leftHand" id="leftHand"> </div> Ok, I thought this would be simple, but I was wrong. I have a simple <textarea>. In this textarea, I do not want to have the text wrap at the edge of the text box. Seems simple. Well, here's where the monkey **** starts to fly. It turns out that the w3c has deprecated the "wrap" attribute in XHTML 1.0 (which is the standard I use). Ok, there should be a CSS property to take care of this then, right? Wrong, as far as I can find anyway. I have found the white-space property and this sort of works in IE (but no horizontal scroll bar) and not at all in Firefox. Is there anything that I have missed that actually works correctly in multiple browsers, besides the "wrap" attribute (which, incidentally, works perfectly in both browsers)? My advice to me is to start drinking heavily. cadrunk: I am trying to build a site with centered content that resizes with the browser window. Click here to see a test page of what I am doing. Notice that this looks and functions beautifully in firefox/Opera. Notice that it functions semi-beautifully in IE. The fact that it even works in IE at all is a miracle because when I was searching for an answer to my problem I stumbled upon this: PHP Code: width:expression(document.body.clientWidth > 800? "800px": "auto" ); which allowed me to specify the max-width for my content. Now what I would like to happen is when the browser window is resized, I would like the text to wrap to fit the window within the center content div. To see what I mean, view the page in firefox and narrow the width of your browser window and then try the same thing in IE. Is there a way to make IE behave like firefox? Here is my markup: PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Nova Electronics Dat, Inc.</title> <link rel="stylesheet" type="text/css" href="styles/main_style.css" /> <link rel="stylesheet" type="text/css" href="styles/drop_down.css" /> <script type="text/javascript" src="scripts/javascript.js"></script> </head> <body> <div id="drop_down"> <ul id="nav"> <li id="first"> <div><a href="">Link</a></div> <ul> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> <li><a href="">Link 3</a></li> <li><a href="">Link 4</a></li> </ul> </li> <li> <div><a href="">Link</a></div> <ul> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> <li><a href="">Link 3</a></li> <li><a href="">Link 4</a></li> </ul> </li> <li> <div><a href="">Link</a></div> <ul> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> <li><a href="">Link 3</a></li> <li><a href="">Link 4</a></li> </ul> </li> <li> <div><a href="">Link</a></div> <ul> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> <li><a href="">Link 3</a></li> <li><a href="">Link 4</a></li> </ul> </li> <li id="last"> <div><a href="">Link</a></div> <ul> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> <li><a href="">Link 3</a></li> <li><a href="">Link 4</a></li> </ul> </li> </ul> </div> <div id="content"> blah blah blah blah blah blah blah blah </div> </body> </html> and the relevant CSS (i left out the suckerfish menu CSS): PHP Code: body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; background: white url(images/ddbg3.gif) no-repeat 6000px 6000px; padding-top: 20px; margin: 0; color: #FFFFFF; } #content { max-width: 800px; background-color:#0099BB; border: 6px double #999999; padding: 0 1em; voice-family: "\"}\""; voice-family:inherit; margin: auto; width:expression(document.body.clientWidth > 800? "800px": "auto" ); } html > body #content{max-width: 800px;} Hello! I have a little bit of a problem. I'm trying to create a drop down with a fixed width, but have the options be a flexible width (in other words, it flexes with the content. It works just fine in Firefox and Chrome, but surprise, surprise, IE cuts it off. Is there anyway to trigger word break or something in IE? I tried a line break and that didn't work either. Thanks for any input! Two questions: 1, I tried using min-width and it doesnt work with block level elements unless I float them or use position: absolute. What is the correct way to set the width on a block level elements? 2, Now FF also implements: word-wrap: break-word, so thats very good news. However I cant get it to ignore a minimum width. Ie I dont want a div with a min-width containing text to expand when the word-wrap is set and the text is too long. I only want it to expand when other items that are larger then the min-width are put in the div not when text is put in the div. thanks Hi I am facing starnge issue in IE with word-wrap: break-word style. When I set this to a p tag some times I see a word of that paragraph is displaying twice on IE though there is single instance in source. I tried debugging and found by removing the word-wrap style it is displaying as in source. But I have to wrap the word text to avoid crossing the p tag. Please suggest.... Hi guys, I normally just look at forums and lurk without joining however I've run into a problem in which case I have to ask. I apologize be for hand if this is in the incorrect place or if it sounds rude (from a person who just joined.) I'm having problems position my menu inside a wrap and to have it fully extend to the end (100%). I'm met with a couple of problems with everything I try. I would post a picture, however It wont let me as I just signed up. If needed I will reply with the link spacing out the url so its accepted, but thats if you require it. Here is the CSS code I use. #menuwrapper { /*holds menu*/ float:left; position:fixed; margin: 0; padding: 0; width: 900px; height: 2em; background-colorink; border: thin solid orange; } #iframe { width:900px; height:500px; border: 1px dashed purple; margin: 0; padding: 0; text-align:center; z-index: 1; } .logo { width:900px; z-index: -1; } /*nav*/ #nav { width: 100%; height:2em; font-size: 14px; color:green; z-index:3; position:absolute; } #nav ul { margin: 0; padding: 0; width:100%; list-style: none; overflow:hidden; } #nav a { text-decoration:none; color:green; } #nav li { position:relative; /*main*/ list-style:none; float:left; width: 8em; height:30px; line-height: 2em; background-color: #e3d0d3; } #nav li:hover { /*hover when mouse goes over - default*/ background-color: #c4c5c7; } #nav li:hover a { /*text hover - col etc*/ display:block; float:left; text-align:center; } #nav li ul { display:none; } #nav li:hover ul{ display:inline; float:left; height:auto; margin:0px; padding:0px; text-align:left; } #nav li:hover ul li { width:100%; height:2em; border:none; border-bottom: 1px dotted black; } Any help on this will be a huge help. Many thanks G. Hi, I have a site which, due to a lot of extraneous code from the CMS, essentially, looks like this: Code: <div id="wrapper"> <div id="header"></div> <div id="left-panel"> [content] </div> <div id="full-panel"> <div class="standard-article"></div> <div id="prices">[table goes here]</div> </div> <div class="clear"></div> </div> Basic CSS: Code: #wrapper {
width: 1007px;
}
#left-panel {
float: left;
width: 216px;
}
#full-panel {
width:735px;
}
The site is designed to be a fixed width of 1007px (and this is set in the CSS in various location: wrapper, header etc). My problem is that, within the 'prices' div, there is a table which can be many columns wide. At the moment, in IE6 (Firefox is fine), the full-panel div wraps down below the left-panel when I would actually prefer it to stretch outwith the boundary of the 1007px wide site. Is this possible? Can anyone assist? Thanks in advance. R Is there any way to add a link to a wrap image Under Page structure I have made 4 wraps (displaying the relevant one-..image path is made-up) Quote: blah blah... #wrap4 { background:url("http://www.ssswww.com/yyy.gif") no-repeat 95% 0.3%; padding:15px; width:100%; width/* */:/**/auto; width: /**/auto; } #content { max-width:890px; padding:0 30px 50px; ...blah blah And under Body: Quote: <!-- Begin wraps --> <div id="wrap"><div id="wrap2"><div id="wrap3"> <div id="wrap4"> All I want to do is attach a link to the #wrap4 image so that the whole image would be a one giant link. Does anyone know a way how to do it? Thanks! i am making a web page using CSS. At the bottom of the page I have a box from left to right with thumbnails in it. I do not want these thumbnails to wrap. I tried whitespace:nowrap, but this makes the page really wide. The box the images are in has AUTO for the width. So if I re-size the window the width of the box re-sizes. when text is displayed in a div.. it only goes 75% of the width of the div and then line breaks. I want it to go 100% of the div and then line break. How do i solve this. Here is the css for the div. Code:
.message {
float:left;
width:98%;
background-color:#EFEFEF;
border: 1px solid black;
padding:4px;
overflow:auto;
margin-left:3px;
min-height:120px;
}
I'm creating a textbox that user text will be entered into. It has preset dementions, and I need to be able to scroll down when the text exeeds the height, but I need to be able to force the sides to wrap..... I was using this: <pre style="width:110px; height:130px; overflow:scroll"> but that let's them scroll to the side, too, I want to force a wrap on the sides, but still scroll vertically.... I am working on this site design for a client: http://universalcorner.com/testsite/ In the center of the site, there is a text box with a dark blue square-shaped div inside of in it, positioned in the bottom right corner. CSS: Code:
#textbox {
width: 636px;
height: 292px;
float: left;
display: block;
border: solid #000027;
border-width: 0 12px 12px 0;
background: #C1BDFF;
margin: 0;
padding: 0;
}
#textbox p {
margin: 10px;
}
div.cube {
width: 150px;
height: 140px;
border: solid #000027;
margin: 0;
padding: 0;
}
HTML: Code: <div id="textbox"> <div style="background: #002455; float:right; border-width: 12px 0 0 12px; margin-top: 140px; margin-left: 10px" class="cube"></div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi sapien urna, scelerisque nec, imperdiet vitae, luctus non, nisi. Duis et magna et tellus imperdiet tempor. Sed ipsum.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi sapien urna, scelerisque nec, imperdiet vitae, luctus non, nisi. Duis et magna et tellus imperdiet tempor. Sed ipsum.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi sapien urna, scelerisque nec, imperdiet vitae, luctus non, nisi. Duis et magna et tellus imperdiet tempor. Sed ipsum.</p> </div> The client would like the text in this box to wrap around the top of the dark blue square-shaped div, filling in the empty space above it. My current code has the square div positioned correctly, but because of the margin-top, it only wraps around the left side of the div, leaving the space above it blank. I also tried setting the square div's position to relative and top: 140px. This positioned the div correctly, but it overlapped the text rather than letting it wrap. Still had the blank space above it, too. Is there a way to achieve what the client wants? Thanks for taking the time to read my quesiton. I have an image, that if I use float: I can get the text to wrap around the image, but if I try to position the image and get the text to wrap, it doesn't. The text just shows up underneath the image. Instead of using float, I've tried display: block; but that didn't help. What do I need to change so that I can get the text to wrap around the image? Thanks, Brad Image is in textbox1 CSS: Code: .textbox1 {
height: 180px;
width: 280px;
font-size: 20px;
padding: 3px;
position: absolute;
top: 55px;
left: 15%;
border-style: solid;
border-color: red;
border-width: 2px;
/*display: block;
float: left;*/
}
i am making this page... T10L New and on the page, i am trying to float the right column on the right... like it is.. but problem is, when the text on the left continues past the right column, it isnt wrapping... like on this page... T10L Old i know it is because i have a width set on the "maincontainer" div... which is the left side, but if i dont do this, the right div will just be pushed to the bottom... any help or suggestions would be great... Is there a way to have texts wrap an image? For example, I want to have a small image 120x146 jpeg image aling top left on the page. I then want the texts to start from the top next to the image on the right side of the image just like in MS Word. Is this possible? ljCharlie Hi everyone. I have a div with text and directly after that I have an image. Since a DIV is a block level element, it causes the image to wrap to the next line. Is there some way I can prevent it from doing so? Thanks for any help or suggestions. Greetings, How do you make a paragraph wrap around an image that is floated to the right or left? And what I mean here is not placing the image in a specific place in the middle of the paragraph code and then floating it, but wrapping text that comes from a tag like <p>$paragraphContent$</p> around an image that is floated left or right. Like basically, you don't know what exactly the text of the paragraph is, but whatever the text will be like, you want it wrapped around the image, and the image to be nicely placed in the middle of that paragraph. And can you do this with a number of paragraphs inserted in a <div> tag for instance? I mean just one image for all those paragraphs, to be placed neatly in the middle? Thanks for anyone taking the time to help and give tips. Currently I have this: <div style="padding:5px; overflow:auto; border:1px solid #c0c0c0; font-size:13px; background: #EEE;"> mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd </div> I want to make it so that it will always stay on 1 line, and a horizontal scroll bar will appear if the window gets too narrow. How can I do this? edit: I can't use <pre> tags because the destroy the formatting in a more annoying way. |
|||||||