I have a contenteditable div that I want to fill 100% of its container.
The div has the following styles applied, among stylistic ones:
width: 100%;
max-width: 100%;
height: 480px;
overflow-x: auto;
overflow-y: scroll;
word-wrap: break-word;
overflow-wrap: break-word
The issue is that the text never wraps horizontally. The div continues to expand infinitely once the length of each line exceeds its original width, despite width and max-width being set.
Changing the properties to an explicit quantity, e.g. 960px, has the desired effect. The div remains at the defined size and horizontal text wraps inside it once the obvious end of the line is reached. I want the contenteditable div to consume 100% of its parent though. How do I have it fill the parent without it expanding horizontally infinitely on text entry?
Ilmiont
You could try with
text-overflow:ellipsis;
Use this property:
word-break:break-word;
Related
I want to make the div stay the same size while I resize the window.
My css for the div:
.header {
white-space: nowrap;
color: #fff;
padding: 0.5em;
background: linear-gradient(90deg, #B71C1C, #0D47A1, #0D47A1);
}
and here is the output before the wrap:
and after the wrap:
what I want is to header div always stay the same size no matter the browser's width.
The "white-space:nowrap" property is meant for text wrapping, not for general responsiveness of your elements. https://www.w3schools.com/cssref/pr_text_white-space.asp
You either want to add a fixed "width" property (f.e. in pixels), or a "min-width" property to your element.
I think the white-space: nowrap property is used to stop text from wrapping. In your case you might want to set a fixed width for that div so that it will not change based on the window size.
I have a simple responsive 2 column design, the left column has pre and a nested code elements in it.
The code element has overflow: auto set, so when its content exceeds its specified width, it should show a horizontal scrollbar inside it without wrapping the lines.
This works fine but only when the parent (i.e. the left column) is not floated. I.e. when the window is narrow. You can try it yourself here.
#media (min-width: 300px) {
.left {
float: left;
margin-right: 100px;
max-width: 400px;
}
.right {
float: right;
margin-left: -100px;
width: 100px;
}
}
pre {
overflow: auto;
word-wrap: normal;
white-space: pre;
}
code {
overflow: auto;
}
This is odd because I expect the code element to have a dynamic width like when it does when the window is narrow, but it acquires a fixed width for some reason when the parent is floated.
Am I doing something wrong here? Is this supposed to happen?
Please note that I am not looking for a JS workaround, this is very simple html/css and should work out of the box.
Based on your updated Fiddle, you gave the element in question a max-width of 400px to expand to. When it has a long line of text in it, it may take up that entire width. Basically, it's just your design being responsive to its content. The right column drops down below it exactly as it should, and if you resize the container to be smaller the pre block starts shrinking right along with it.
To see what I mean, right-click the element and Inspect Element to look at its calculated width. Also, if you think about it, it has to be 400px (or whatever the max width is). Otherwise, it hasn't reached its overflow point to acquire the scrollbars you were testing!
I have a div which is filled with dynamic content. The div width is set to 680px, however if the content exceeds this width, rather than wrapping, it just keep going on a single line creating a very wide div.
What should I do to enforce the 680px of the div and force the dynamic content to wrap within those restraints?
thanks
You can try to add the following in your div's css class:
.someClass {
word-wrap: break-word;
width: 680px;
}
Hope it helps!
I need to create a div of fixed height and 100% width. The contents of the div are a series of images (just img tags).
When I resize the window smaller than the overall width of the images, the last image in the list shifts/flows down and to the left, underneath the first image.
How do I keep the images from shifting/flowing to the next line and keep them all on one line so that the user is forced to scroll the div horizontally to see the rest of the images?
Here is a jsfiddle as an example: http://jsfiddle.net/ZnWXj/2/
You'll want to use the white-space CSS property to the div and give it a nowrap value.
Show in this jsFiddle. (Your original, plus I added the overflow-y property.)
CSS used:
div {
height: 120px;
background: #666;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
I think you are trying to Float all the images in the left.
In css use Postion Absolute for all images and then Float all the images to the left.
Something like
float:left;
position: absolute;
use these on the img tag
this is off the top of my head has not tried it yet. So sorry if I am wrong.
There is a Div of width say 500px and height 50px.
Inside this Div there are many (say 50) small Div of width 50px and height 50 px.
Now i want a horizontal scroll instead of a vertical one.
How can i force those small divs to overflow horizontally not vertically
Also number of small divs can change.
Assign the following CSS to the outer DIV:
white-space: nowrap;
overflow-x: scroll;
See an example at this fiddle.
Try setting the child div's to display: inline-block, then set the parent to white-space: nowrap.
Hope that helps :)
the main div style define
float : left;
overflow : scroll;