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.
Related
Hi there I have a flex container with some elements in it and one of them should be a div with a title, a content composed of an image and a long text, and a footer.
All of the elements should be the same height and I am experiencing trouble making this precise div the right height. You can check it here
You can see I have a border around my div #article and the text with the footer is crossing it. I would like the text to be like text-overflow: ellipsis; but with no white-space: nowrap; and the footer to be on the border so all children of my flex container
You should remove the max-height on #une, #article, #important and place it on .contentArticle .textArticle but you won't have the ellipsis.
The text-overflow: ellipsis; is tricky when you want multiple lines displayed.
There is a tutorial on how to do it only with css here: https://css-tricks.com/multi-line-truncation-with-pure-css/
Or you can use Javascript
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've adapted jQuery UI MultiSelect Widget so that the text would show all selected labels, but if too many elements are selected to display, the text would be trimmed and ellipsed. I've done it so:
.ui-multiselect .selected-text {
display: block;
max-width: 190px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
The only things that I don't like in that solution is that I had to set display: block to the element (span). Without it, the width parameter was ignored and the span expanded to the text size.
Is it possible to get ellipsis to work with inline elements (without changing display to block)? If so, how to achieve that?
There is a display option that works as a half-way house between inline and block, designed for exactly this kind of situation...
it's called
display:inline-block;
Use this instead of block, and your element will still flow in your content as if it were inline, but will act as a block for its contents, which means your ellipsis should work.
You cannot apply text-overflow to inline elements.
http://dev.w3.org/csswg/css-ui/#text-overflow
I have div tag with fixed height. in it there is anchor tag < a> tag. when text in anchor tag exceeds width of div it comes in 2 lines in div tag. Due height of div tag second line is displayed half. so how to use text-overflow :ellipsis so that ellipsis will be displayed and with which tag? please help.
Thanx in advance
If you just need a single line of text, you can set the white-space CSS property to nowrap. The complete CSS will look as follows:
div {
width: 75px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Check this fiddle: http://jsfiddle.net/yXgQT/