I have a table in bootstrap with text inside each td. I don't know if this is possible but I want to fill the whitespace with ellipsis.
The reason I do not want a border bottom is that I do not want the text underlined.
Here is my table and what I have tried so far.
The first and last child td are aligned left and right respectively. Any td in the center is center aligned. The idea is to have the ellipsis fill whitespace on the right with left align. Whitespace on the left with right align and on both sides for the center.
My first thought was to use css :before and :after and overfill the content with '.......................' then break with text-overflow: ellipsis like.
.table-menu .table-responsive td:first-child:after, .table-menu .table-responsive td:last-child:before {
text-overflow:ellipsis;
content: '.......................';
}
but as the table is responsive, this will not work. The tables need to be fixed width for the result to work. So overfilling the content just pushed it to a new line.
Is there a way in css or js to achieve this or do I need another approach to filling the whitespace?
Here is a jsfiddle of my above code https://jsfiddle.net/h3n18huh/1/
I have an idea for this, you can add a label or span inside all <td>, that span/label have white background and <td> have background image with a dot repeated. so the span and label will cover the dots with the white background and the ellipsis will work on any resolution and alineation.
Example:
td:nth-child(1) { text-align: left; }
td:nth-child(2) { text-align: center; }
td:nth-child(3) { text-align: right; }
span {
background-color: white;
display: inline-block;
padding: 2px 5px;
}
td {
background: url(http://s9.postimg.org/5hyiu7din/dot.png) left bottom repeat-x;
}
<table width="100%">
<tr>
<td><span>Left</span></td>
<td><span>Center</span></td>
<td><span>Right</span></td>
</tr>
</table>
Related
This is my table UI, I want that the text in it comes at the left of the column but the buttons present in "Action" column also getting effect, I want that only text will come at the right side of the column
Here is the css of the table D.
.table td {
font-size: 0.813rem;
font-weight: 400;
color: #8d97ad;
vertical-align: middle;
text-align: left !important;
}
You can use the :not selector and the :last-child selector to apply a style to all td elements except those of last column.
.table td:not(:last-child) {
text-align: right !important;
}
https://www.w3schools.com/cssref/sel_not.asp
https://www.w3schools.com/cssref/sel_last-child.asp
I have a stars rating image which is controlled using Javascript and CSS to display a rating out of five (in quarter steps, twenty is the dimensions of the star in pixels):
$.fn.stars = function() {
return $(this).each(function() {
var val = Math.round(parseFloat($(this).html())*4)/4;
var size = Math.max(0, (Math.min(5, val)))*20;
var $span = $("<span />").width(size);
$(this).html($span);
});
}
$(function() {
$("#avg-rating").html('<span class="stars">{{ avg_rating }}</span>');
});
span.stars, span.stars span {
display: block;
background: url(stars.png) 0 -20px repeat-x;
width: 100px;
height: 20px;
}
span.stars span {
background-position: 0 0;
}
The image is displayed in a Bootstrap column:
<div class="container-fluid">
<div class="text-center">
<div class="row">
<div class="col-xs-6"><div id="avg-rating"></div></div>
<div class="col-xs-6">blah blah</div>
</div>
</div>
</div>
The image is currently left justified in its column. I have tried several things in CSS to align the image horizontally in its column, such as adjusting the display attribute or background position. But I am unable to move the image without upsetting the functionality of the image manipulation.
Update
Using inline-block instead of block messes up the placement of the stars (image should show four lighted stars out of five):
span.stars, span.stars span {
display: inline-block;
...
Your problem seems to stem from here:
span.stars, span.stars span {
display: block;
background: url(stars.png) 0 -20px repeat-x;
width: 100px;
height: 20px;
}
You've set the star container to 'display: block' which makes it take up the whole line. You want it to be an inline-block with a width smaller than the full-width available so that it can be centred.
Here is an example of how it would work:
https://jsfiddle.net/f6L8gr1b/2/
If your elements with class "col-xs-6" are supposed to be next to each other horizontally, you can use inline-block.
.col-xs-6 {
display: inline-block;
}
The div elements default to block which places them on a new line.
I have a div element which is deliberately too small for the text inside it. I want the overflow to be hidden, but I want the text inside the div to be the 'bottom' of the text block i.e the end of the sentence to be shown and the start of the sentence to be hidden.
It would be even better if I could get an elipsis, e.g INSTEAD of a regular elipsis cutting off the end of a sentence:
|the cat jumped over...|
I would want an elipsis at the beggining of the block i.e
|...over the high fence|
Can anybody help me?
Here's one way:
1) Place the text in a wrapper element with position:absolute and bottom:0
2) Since the text will always be larger than the width of outer div...as the question says:
I have a div element which is deliberately too small for the text
inside it.
...we can set an ellipsis before the text using generated content on the outer element
DEMO
div {
width: 120px;
height: 18px;
overflow: hidden;
position: relative;
border: 1px solid green;
}
div:before {
content: '...';
display: inline-block;
}
span {
position: absolute;
bottom: 0;
}
<div><span>the cat jumped over the fence</span>
</div>
I'm trying to make a string fits in a determined area (td) without breaking line. The problem is: It needs to ...
Fit while resizing
Fit in N kinds of resolution
Add ... at the end when needed (and don't when not needed)
Accept the change of font-size, font-weight, and font-family
Based on the answers on Novon's question, I made the following code:
CSS (// Just adding some styles to break the line)
.truncated { display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
jQuery (// Find all td that contains a .truncated element. Getting the real width (by removing the content and adding it again) of the td. Applying, if needed, minWidth on the td)
jQuery('.truncated').closest('td').each(function() {
var text = jQuery(this).text();
var widthOriginal = jQuery(this).width();
var widthEmpty = jQuery(this).text('').width();
jQuery(this).text(text);
if(widthOriginal >= widthEmpty){
var width = (parseInt(widthEmpty) - 10) + 'px';
jQuery(this).css('maxWidth', width);
jQuery(this).text(text + '...');
}
});
the result (as expected from the above code) is:
but it should be:
I was thinking, maybe try to find the first line of the string and remove the rest but didn't find a way to do that (and it's a lot of "workaround" for my taste). Is there a better way to do that?
Single line text truncation can be easily achieved using css text-overflow property, which is supported by all major browsers, including IE since version 6.
The thing is that text-overflow alone doesn't do much. It only defines what will happen when there is text overflowing the container. So in order to see results, we first need to make the text overflow, by forcing it to a single line. It is also important to set the overflow property of the container:
.truncated {
display: block;
white-space: nowrap; /* forces text to single line */
overflow: hidden;
text-overflow: ellipsis;
}
jsFiddle example: https://jsfiddle.net/x95a4913/
text-overflow documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
You can do it with pure CSS, see this link for reference:
line clampin
Add those to your css:
.truncated {
display: -webkit-box;
-webkit-line-clamp: 1; // amount of line you want
-webkit-box-orient: vertical;
}
Or you can try clamp.js
https://github.com/josephschmitt/Clamp.js
text-overflow: ellipsis
seems a pure CSS solution
http://www.w3schools.com/cssref/css3_pr_text-overflow.asp
Wrap the text twice to achieve this:
<style type="text/css">
.relative_wrap {
height: 1em;
position: relative;
}
.absolute_wrap {
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
overflow: hidden;
text-overflow: ellipsis;
top: 0px;
white-space: nowrap;
}
</style>
<table>
<tbody>
<tr>
<td>
<div class="relative_wrap">
<div class="absolute_wrap">
LONG TEXT HERE
</div>
</div>
</td>
</tr>
</tbody>
</table>
Since you use jQuery, it is easy:
$('.truncated').wrap('<div class="relative_wrap"><div class="absolute_wrap"></div></div>');
If you set table layout to fixed and the td overflow as hidden, you could prepend an ellipsis as a float-right div when the td's scroll width is greater than its client width.
Here's the CSS, which includes styles to prevent bleed-through on the table:
table {
table-layout:fixed;
white-space:nowrap;
width:500px;
border-spacing: 0px;
border-collapse: separate;
}
td {
overflow:hidden;
border:1px solid #ddd;
padding:0px;
}
.hellip {
padding-left:0.2em;
float:right;
background:white;
position:relative;
}
jQuery:
$('td').each(function() {
if($(this)[0].scrollWidth > $(this).width()) {
$(this).prepend('<div class="hellip"">…</div>');
}
});
Demo at: http://jsfiddle.net/5h798ojf/3/
I have a huge table containing data in vertical and horizontal directions...
Like this: jsfiddle
I am hoping to make the far left column and the top row fixed in a way that when I am scrolling in both directions, I am able to keep the these two (column and row) in place. But only move the content.
How to achieve this with JS/CSS?
I am guessing a pure css solution won't do it, since there is a two-way scroll.
someclass { position: fixed }
The entire code required to answer your question is too large to include here. Instead, I'll link you to the JSBin which holds the answer, and just include the styling and javascript.
The caveats are:
If you are dead set on using tables instead of divs to display your data, then you're going to have a bad time formatting the answer I gave you, especially if the data in the cells are varying widths and heights.
In order to accomplish this, you must go through each row and column header, then set their respective widths and heights to the max between their widths/heights and the widths/height of the rows in the table. The reason why their widths and heights aren't automatically set respective to the rest of the cells in the table is because upon setting their position: fixed style attribute, you basically break them out of the table.
So, if you have the power, consider using divs instead and breaking the row headers out into a separate div you can position: fixed and emulate the current behavior of the column headers.
Another bonus is that you will have a performance increase because jQuery will not be iterating through every row to adjust the row headers every time you scroll.
You must use jQuery UI.
HTML:
<!-- Notice I removed background and border color from table tag -->
<table border="0" width="100%" cellpadding="3" cellspacing="1">
<tr>
<td>Dead Cell</td><!-- this cell is not shown -->
...
CSS:
/* Make white space above table since we broke the column headers out of the table */
table {
margin-top: 51px;
position: relative;
}
table td {
border: 1px solid #FFCC00;
height: 44px;
background-color: #FFFFCC;
}
/* styling for column headers */
table tr:first-child {
position: fixed;
top: 0;
left: 57px;
z-index: 100;
}
/* remove first cell in top left position */
table tr:first-child td:first-child {
display: none;
}
table tr:first-child td,
table tr {
position: relative;
}
table tr:first-child td {
background: orange;
}
table tr td:first-child {
background: orange;
position: fixed;
width: 39px
}
/* Make white space to the left of table since we broke the row headers out of the table */
table tr:nth-child(n+2) td:nth-child(2) {
margin-left: 48px;
display: block;
}
JS:
$(function(){ // When document is loaded and ready
$(window).scroll(function() { // When we scroll in the window
// Move column headers into place
$('table tr:first-child td').css('left', - $(this).scrollLeft());
// Move row headers into place
$('table tr td:first-child').each(function() {
$(this).position({ // jQuery UI overloaded function
my: "left top",
at: "left top",
of: $(this).parent(),
using: function(pos) {
$(this).css('top', pos.top);
}
});
});
});
});
Again, here is the link to the JSBin.