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
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 have an absolutely positioned div, with overflow:auto.
When it overflows vertically, a vertical scrollbar appears. This appears within my div (even though it isn't fixed width), which shrinks the space available to the div's contents. In my case, it causes the text to wrap unnecessarily, which is undesirable.
See https://jsfiddle.net/hktgcrj0/ - shrink the page until the div overflows and the scroll bar appears - you will see the text wrap.
Is there any way to make the scrollbar appear outside of the div, or increase the width of the div to accommodate the scroll bar?
Note that for my application (the fiddle is massively simplified) giving the div a fixed width is not an option, and disabling text wrapping is also not an option.
Try adding:
div {
white-space: nowrap;
}
or wrap the inner elements in <p> tags and apply white-space: nowrap; to that.
I'm having a problem with some text overflowing outside the parent's div. I tried with
element.style {
text-overflow: ellipsis;
overflow: hidden;
}
but to no avail.
Here is a JSFiddle with my code. Looks like the DD element goes outside the div. How can I force it inside without specifying a fixed width?
Your <dd> element has no width to overflow from.
See this updated demo.
UPDATE
Looks like display:table-cell was causing the issue in this case. Removing this style and setting display:flex; to the parent wrapper fixes the problem.
See this demo.
Flexbox is good for dynamic content and responsive design, whereas display:table-cell; seems to get stuck at a static width.
I have given my HTML table row space of 200px. But a text of more than that space can be inserted into it. I want my row to display "..." at the end of the row if the content is more then that space.
Use
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
in CSS to have the overflowing text be replaced by ....
But as it doesn't work for TD elements, you'll have to add another element in between, for example a div.
See demonstration.
This is the styling you are looking for.
Good luck!
text-overflow: ellipsis;
Some more here: http://quirksmode.org/css/user-interface/textoverflow.html
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/