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.
Related
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;
I have a strange problem which I can't seem to figure out. I have a td showing some timestamp text inside it. The strange thing is that this text would rather use multiple lines than use the whole cell width available to it before moving to the next line. There's ample width available, so how do I make the timestamp text fit in just one line ?
The CSS currently being applied to the td is the following:
width: 30%;
word-wrap: break-word;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
text-align: center;
Note that the width properly above is being used to set the width of the td relative to the entire table width.
The width of your <div> child element of the <td> is getting set to 30% of the width of the cell and not the table. Try setting the width to 100% in the splunk-timedata-field class.
The css you give is applied on the div instead of the td.
So this div width is 30%, and then your text breaks.
You may have another unrelated error, the "==$0" string that is showing just after the div.
You can remove class from div and set this class to td.
Then width 30% will work for total width of table.
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 am trying to set font size, family and line-height on a div. I then need to know the correct height of the div for some layout stuff. However, the height I am getting is wrong, and a scrollbar is appearing on the div's parent for probably the same reason. The following jsfiddle best illustrates my problem:
http://jsfiddle.net/JYkAX/19/
Here is the html:
<div class="separator">
<div class="PleaseNoScrollBar">
Some Text Here
</div>
</div>
Here is the css:
.separator
{
background: gray;
display: block;
overflow: auto;
}
.PleaseNoScrollBar
{
font-family: cursive;
background: lightgray;
line-height: 32px;
font-size: 32px;
display: block;
opacity: 0.5;
vertical-align: top;
}
The following jquery retrieves the outer height of the div (but its incorrect).
alert($(".PleaseNoScrollBar").outerHeight());
Any ideas on what is causing this? Unfortunately, I need to be able to retrieve the actual outer height of the div, I can't just make the parent div larger.
I should mention, the scrollbar only appears in Chrome and IE. In firefox the div is scrollable by dragging the mouse, but no scrollbar appears.
You are viewing a scrollbar cause you set overflow:auto; on .separator. Just remove it and you won't have scrollbars anymore.
As for the height, the alert function retrieves "32" which is, I think, the correct height of the div.
Remove the overflow:auto declaration from the container div.
.separator
{
background: gray;
display: block;
overflow: auto;
}
from the w3c spec...
overflow: auto The behavior of the 'auto' value is user agent-dependent, but
should cause a scrolling mechanism to be provided for overflowing
boxes.
source: http://www.w3.org/TR/CSS21/visufx.html#overflow
this means that the folks that coded the browser determine how overflow:auto works. If you set the height of the . separator div to 34px, the scrollbar goes away.
I would recommend removing the overflow:auto from the .separator div.
Check out this: http://jsfiddle.net/JYkAX/26/
If the height of the container div is set to anything less than two pixels greater than the child elements height, the scrollbar shows up. My guess is that the browser adds the 1px border that is added to both the top and bottom when an "overfow auto" is declared.
I have had similar issue, while using font from Google Fonts and it had implicitly set line-height of 1.5em, which the jQuery probably did not see. Once I explicitly wrote line-height:1.5em to my CSS reset (or website font setting), it was OK.
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;