I my page i have a panel and a table in the panel, this is my code in JSFiddle
I have a problem in my code, in td of table i have text and i set text-overflow for that but it doesn't show correctly. it shows like this :
But i want text shows like this:
How can i fix it?
You can give your paragraph a class for easier to manage:
<p class="text">...............</p>
Then you can use following css properties to achieve your task:
.text {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
}
Updated Fiddle
hope it will help you, remove the text-overflow and white-space from td.
.info-table td {
overflow: hidden;
}
demo
remove the white-space: nowrap; property in your css, you will get
Actually overflow works only on single line that's why your all content shrink onto one line.
you may use some jQuery/Javascript library like this http://pvdspek.github.com/jquery.autoellipsis/ or try a pure css solution using this tuts
http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/
try something like this,FIDDLE
change your code
FROM THIS
.info-table td {
overflow: hidden;
text-overflow: inherit;
white-space: pre-line;
}
TO THIS
.info-table td {
overflow: hidden;
}
EDITED CODE FIDDLE
.info-table td p{
max-height:260px;
line-height: 18px;
text-align: justify;
font-size: 10px;
font-weight: normal;
}
increase the height of div. i think due to less size it showing like this
Related
i search solution to detect overflows in the css-class .entry.title,
and when detect take some css to reduce the font-size.
example: css before detection:
.entry-title {
font-size: 1.42em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
css after detection:
.entry-title {
font-size: calc(1.42em * 0.95);
white-space: inherit;
overflow: inherit;
text-overflow: inherit;
}
I think this could be done with javascript but I have no experience with it.
If the text body of an object of such a class is on a single line, this problem will be easy.
However, it is very difficult to dynamically adjust the font size to eliminate overflow when there are multiple lines of text and complex elements in it.
This is because many style factors affect the overflow of the object, in addition to the font size of the text, and calculating them all is very time-consuming.
To implement response performance related to font size, it is best to use #media{}.
For example:
.entry-title{
font-size: 16px;
}
#media(max-width: 1024px){
.entry-title{
font-size: 14px;
}
}
I think you can use ResizeObserver to detect element is overflow, this is a demo:
https://codesandbox.io/s/infallible-sun-ouotsz?file=/src/styles.css
I'm facing an issue very obvious.
I think that more than 1 000 000 people already asked this question, but I didn't succeed to find my answer on Google :'(
I wanted to have my text wrapped in one of my cards, this is what I got now :
My CSS is currently :
overflow: hidden;
white-space: pre;
text-overflow: ellipsis;
So, what I want :
My text is going to a new line when there is a line break in the text: ok
My text has 3 points ellipsis when there is a vertical overflow: ok
My text is going to line when there is a horizontal overflow: not ok (see line 2 in the image)
How can I do this?
I found my way using webkit-line-clamp, helping myself with this useful newspaper here.
The final CSS is:
overflow: hidden;
white-space: pre-line;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
I am using the Kendo UI grid for Angular and have a scenario where one of the grid columns has a lot of text data, but I don't want the text to wrap. I want all the rows the same height.
I tried adding this to the SCSS file for my component:
.k-grid {
background-color: green;
}
.k-grid tbody tr {
height: 40px;
}
.k-grid tbody tr td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
The background is green (I put that there to rule out any issues with my SCSS not being built correctly) but the other styles seem to be getting ignored. I looked at the elements in Chrome debugger, and the rules for the row stuff aren't being referenced at all, which makes me think these selectors don't work for the Angular version. There's plenty of documentation for the jQuery version (which is where I got this from) but nothing for the Angular control.
Does anyone know what I'm doing wrong or have any ideas how to make this work?
Thanks,
James
Try this:
/deep/ .k-grid tbody tr {
height: 40px;
}
/deep/ .k-grid tbody tr td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Edit:
For more info, you can read about it in the documentation here.
Is any option to control the text which is in <td>
I am using this css style:
word-wrap: break-word;
width: 200px;
display: block;
Without any text in td it is looking good but when there is a text by using the above css the UI alignment is getting disturbed.
See here in second image the alignment at QR tag td is disturbed completely.
Even if there are more no.of characters are there the alignment shouldnot be disturbed .
please help me out with this issue.
Assuming you only want the row to have a fixed height so that only one line of text to be visible.
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
So, I have a list of items which are displayed inline-block. What I'ld like is when you click on a cell, the lines under it go down. Problem is, simply adding a margin-bottom won't work, like showed with this fiddle.
See, the one which should be opened is left alone on her line. What I'd like is something like that:
Any idea?
The default alignment of inline-block elements is baseline, meaning tall and short items will align the bottom of the text line. If you give the <li> elements vertical-align: top, i believe you get what you want;
li {
list-style-type: none;
display: inline-block;
width: 20px;
height: 20px;
background-color: red;
margin-top: 4px;
vertical-align: top; /* added */
}
http://jsfiddle.net/j93H5/3/
you need to add vertical alignment for your margin-bottom and then a margin-top to vertically space your lis:
vertical-align: top;
margin-top: 4px;
http://jsfiddle.net/j93H5/1/
as #Bergi said, splitting into multiple lists is probably the least sloppy way to do this and most likely the more appropriate method, but we don't really know the context.
You can use pseudo-elements to push elements out of the way:
li.space:after {
content: ' ';
display: inline-block;
height: 20px;
}
View jsfiddle