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.
Related
In general we can check size of the browser window by using media query, Are there any ways of checking the size of the parent div element using CSS?
I want to put a break when the parent div element goes down less than 100px.
What I am trying to acheive is this:
<div>
<p>Too long text to be truncated and put break when necessary</p>
</div>
& > p {
max-width: 300px
text-overflow: ellipsis;
white-space: nowrap; ( we can't truncate the text without use this)
overflow: hidden;
}
Initially, the text will be visible in single line with a truncate
and then when I try to minimise the parent div ( It's a wrapped with a resizable element)
then I also try to put break to the text.
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 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 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 create a table for a website that is a fixed width, but is fixed width based on fixed width td tags, and not the entire table having a fixed width. The need for this is because I am showing and hiding some of the columns dynamically using jQuery, and using a jQuery scrolling plugin to scroll the table as it gets wider. The problem I'm running into is that when the width of the td tags makes the table wider than its containing div, the td tags start to shrink instead of maintaining their width. So far, nothing I have done has made the td tags stay the right width. You can see a jsfiddle of what I'm dealing with here:
http://jsfiddle.net/MxE9A/1/
How do I make td tags fixed width, even when they make the table wider than its container?
you can use max-width, and min-width in css to define the minimum and maximum width you want to your td's to reach to.
Haha, so I've never done it this way around, but here is a solution for you. Add the following:
tr {
font-size: 0px;
white-space: nowrap;
}
th, td {
display: inline-block;
}
Note that this will only be IE7+ compatible, but you can use tricks to get it to display correctly as inline block in IE 7.
Trick is to set them to display: inline-block so that they run off the end of the element (using white-space: nowrap).
th {
min-width:200px;
max-width:200px
}
use this for fixed width for th