<table id="tab">
<tr><td class="sub">mmmmm</td><td class="sub">jjjjj</td></tr>
<tr><td class="sub">lllll</td><td class="sub">wwwww</td></tr>
</table>
#tab td {
border: 1px solid green;
max-width: 40px;
}
$(".sub").each(function(){
var o = $(this).html();
$(this).html(o.substring(0, 2))
})
LIVE EXAMPLE: https://jsfiddle.net/UTYLf/1/
i would like max-width for TD - 40px. i would like cut overflow text. I made substring but this is not usefriendly.
mm != ll and jj != ww etc. mm and ll has 2 chars, but mm takes more space than a ll.
In my example i would like have in table same as in this example: https://jsfiddle.net/Eb6WN/
what I must use instead of substr()?
I can use HTML, CSS, JavaScript (jQuery) and PHP
In these types of situations I use overflow: hidden as well as adding a title for each cell to display the complete text:
#tab td {
border: 1px solid green;
max-width: 40px;
overflow: hidden;
}
$(".sub").each(function(){
$(this).attr("title", $(this).text()).css("cursor", "help");
})
https://jsfiddle.net/hunter/UTYLf/4/
This (text-overflow: ellipsis; white-space: nowrap; overflow: hidden;) should sort you out, I think...
You could try adding the text-overflow property to your first CSS class.
#tab td {
border: 1px solid green;
max-width: 40px;
text-overflow: ellipsis;
}
Some documentation about text-overflow can be found here.
Why don't you use overflow: hidden; for this?
There is also a jQuery plugin that allows to have this multiline
http://plugins.jquery.com/plugin-tags/ellipsis
Related
Let's consider there is a style sheet in an html page as shown below
#main {
display: block;
width: 500px;
}
#content {
border: 1px solid #ccc;
}
now I have a situation where I have to update the CSS rule of #main meaning I have to add some css attributes like color, background etc.
So the Style sheet in my html page should be updated like shown below:
#main {
display: block;
width: 500px;
color: #333;
background: #fff;
}
#content {
border: 1px solid #ccc;
}
I can use jQuery css to add CSS rules as shown below
$('#main').css('background','blue');
//but this is not adding #main in <style></style>
//output of above jquery code is:
//<div id='main' style="background: blue"></div>
What I need is for it to add css attributes to a rule in the style sheet (i.e., #main in <style></style>)
I am developing a code editor which is why I face such a problem.
it took me a long time but finally here we go: DEMO
if we click on the #main element the style tag will get changed using the function that we just defined, so if we get the text of the script tag before the function it will be:
<style>#main {
display: block;
width: 500px;
height:200px;
background-color:#000;
}
#content {
border: 1px solid #ccc;
}
</style>
and then after the function is called it will be:
<style>#main {
display: block;
width: 500px;
height:200px;
background-color:#000;
color:#FFF;
}
#content {
border: 1px solid #ccc;
}
</style>
The Function:
//*styleElem* is the target style tag
//*elemToChange* is the target element that we want to change inside the style tag
//*cssRule* is the new CSS rule that we want to add to the target element
function addCSSToStyleTag(styleElem,elemToChange,cssRule){
var oldStyle=styleElem.text(),
theElement=elemToChange,
position=oldStyle.indexOf(theElement),
cssToBeAdded=cssRule,
closingBracketIndex=oldStyle.indexOf('}',position)-1,
newStyle=oldStyle.substr(0,closingBracketIndex)+cssToBeAdded+oldStyle.substr(closingBracketIndex,oldStyle.length);
styleElem.text(newStyle);
};
$('#main').one('click',function(){
addCSSToStyleTag($('style'),'#main','color:#FFF;');
});
I think you cannot explicitly catch css rules inside the current style, but as a work around you can append another style to the head with the new rules, it will override the existing rules as follows :
var newCss = "<style>#main{
display:block;
width:500px;
color: #333;
background:#fff;
}
#content{
border:1px solid #ccc;
} </style>";
$("head").append(newCss);
Try this
var style="#main{display: block;
width: 500px;
color: #333;
background: #fff;"};
$('style').append(style);
This is assumed that you have only one <style> tag in page
You can apply hardcore css to perticular div...Like this
$('#main').css("background":"blue");
I am using JQuery and Html table.
I have table columns with fixed width. But i dont want the text to wrap to next line or enlarge the table when td text exceeds the width.
Is it possible to display td value on hover of the mouse when text length is more than the td width?
If td value is as below:
abbcccccccccccccccccccccccccccccccccccccccccccccccccccc
then i have to display only:
abccccc......
and on mouse over i have to display entire text:
abbcccccccccccccccccccccccccccccccccccccccccccccccccccc
IS it possible? Please suggest me.
How can i calculate whether text length is exceeding the td length ?
Thanks!
Try this,
HTML
<span class='more'>abbcccccccccccccccccccccccccccccccccccccccccccccccccccc</span>
CSS
.more{
display:inline-block;
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.more:hover{
white-space:initial;
cursor:pointer;
width:100%;
}
Demo
Updated for Table,
HTML
<table>
<tr>
<td style="max-width:100px">
<span class='more'>abbcccccccccccccccccccccccccccccccccccccccc</span>
</td>
</tr>
</table>
CSS Change
.more:hover{
white-space:initial;
cursor:pointer;
width:100%;
word-wrap:break-word;
}
Table demo
A jQuery solution, with the benefit that you can limit the exact number of characters displayed, in CSS you can't. If you don't want to damage your table structure, use a tooltip:
Link these files first:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
$("td").each(function(){
var val = $(this).text();
if(val.length > 8){
$(this).attr("title", val);
$(this).text( clip( $(this).text() ) );
}
});
// once the attributes have been set, execute the tootip:
$(document).tooltip();
// helper method
function clip(string){
return string.substr(0, 8) + "...";
}
It is possible with jquery checkout this -> https://jqueryui.com/tooltip/
Not sure on the exact condition, but you can use the CSS and addClass/removeClass as below:
HTML:
<div id="mydiv">
<span id="short" class="show"> gcccc...</span>
<span id="full" class="hidden"> gcccccccccccccccccc </span>
</div>
JS:
$('#mydiv').on('mouseover', function(){
$(this).find('#full').removeClass('hidden');
$(this).find('#short').addClass('hidden');
});
$('#mydiv').on('mouseout', function(){
$(this).find('#short').removeClass('hidden');
$(this).find('#full').addClass('hidden');
});
CSS:
.hidden{
display: none;
}
JSfiddle
consider this example: http://jsfiddle.net/jogesh_pi/ueLha/
HTML
<table id="data_container" border="1">
<tr>
<td><span>asdfadsfadsfasdfasdfasdfasdfasdfsadfasdf</span></td>
<td><span>kljkjlhklhlkhklhkhasdfasdfasdfadsfasdfas</span></td>
</tr>
</table>
JS
$('#data_container td').each(function(){
$(this).find('span').width(20);
});
$('#data_container td').hover(
function(){
$(this).find('span').css('width', '100%');
},
function(){
$(this).find('span').css('width', '20px');
}
);
CSS
span{
max-width: 100%;
height: 100%;
display: block;
overflow: hidden;
margin-right: 10px;
position:relative;
}
#data_container td{width: 50%;}
It seems like it may be possible with CSS only, provided you are willing to set some column widths fixed.
HTML:
<table>
<tr>
<th class='one'>Column One</th>
<th class='two'>Column 2</th>
</tr>
<tr>
<td class='one'><span>Very long text which just goes on and on and on and on and ends.</span></td>
<td class='two'>Epsilon Phi Ignatius Useful Strong Epsilon</td>
</tr>
<tr>
<td class='one'><span>1</span></td>
<td class='two'>2</td>
</tr>
</table>
CSS:
table {
width: 100%;
border-collapse: collapse;
}
table td,
table th {
border: 1px solid black;
}
th {
text-align: left;
background: black;
color: white;
}
td.one {
vertical-align: top;
width: 150px;
max-width: 150px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
td.one:hover {
overflow: visible;
}
td.one:hover span {
min-width: 130px;
position: absolute;
display: block;
background-color: red;
padding: 0px 20px 0px 0px;
}
td.two {
width: auto;
}
Play around with this JSFiddle to adjust for your padding / widths etc:
https://jsfiddle.net/d233dbz7/
I want to change the height of the rows in mi handsontable. I already change the widht of the columns (colWidths: [75,75,75]), but i cant find the way to do the same with rows.
Thanks!
you can use this. but remember you must mark the "white-space:nowrap " as !important to override the handsontable property
.handsontable td, .handsontable tr, .handsontable th
{
max-width: 20px;
min-width: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap !important;
}
I had the same issue, and you need to modify in one place, the css file, or you can overwrite the style in your html:
in the handsontable css file search for the style .handsontable td :
.handsontable td {
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
height: 22px; /*change to the desired height value*/
empty-cells: show;
line-height: 21px;
padding: 0 4px 0 4px;
/* top, bottom padding different than 0 is handled poorly by FF with HTML5 doctype */
background-color: #FFF;
vertical-align: top;
overflow: hidden;
outline-width: 0;
white-space: pre-line;
/* preserve new line character in cell */
}
Just change the "height" value to the one you want inside the css, or you just add the following line in the style section of your html document:
.handsontable td { height: <desired height>px;}
Additionally I would make the changes mentioned by RustyBadRobot in file jquery.handsontable.js, this could be used in some other calculation, but so far the change in css seems to be enough.
Please note that this is working with handsontable version 0.11.3, not sure if this is also true for other versions.
The problem with that Chachi-inactive is the height gets dynamically set on one of the holder divs
<div class="wtHolder ht_master" style="position: relative; height: 27px;">
You can find and edit the below code in the main handsontable.js
columnWidth: 50,
rowHeight: function (row) {
return 50;
},
defaultRowHeight: 50,
selections: null,
hideBorderOnMouseDownOver: false,
This needs to be updated if you have elements below the handsontable table.
I don't know of any parameter similar to colWidths that you can use to specify individual row heights, but you can use CSS to specify a height for all td and th elements.
For example:
.handsontable th,
.handsontable td {
line-height: 50px;
}
I'm using a SlickGrid data table and some of my cells have very long text entries (1000 characters or more).
By default, SlickGrid only shows some of the text, and abbreviates the rest using an ellipsis.
This works well, except that I'd like to show the full text on mouseover, or have some other way to expand the cell to show the full entry.
Is this possible with SlickGrid, and if so how?
Just use this plugin:
https://github.com/mleibman/SlickGrid/blob/master/plugins/slick.autotooltips.js
Register it like this and you are done!
mygrid.registerPlugin(new Slick.AutoTooltips());
By default, SlickGrid disables word wrap. Given that you have your cell height set correctly, you'd be able to see all of your cell's text by editing slick.grid.css like this:
.slick-cell, .slick-headerrow-column {
position: absolute;
border: 1px solid transparent;
border-right: 1px dotted silver;
border-bottom-color: silver;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
vertical-align: middle;
z-index: 1;
padding: 1px 2px 2px 1px;
margin: 0;
/*white-space: nowrap;*/
cursor: default;
}
My question is, why "text-overflow:ellipsis;" doesnt work for me?
I have table on my page and i want to shorten some text inside cell(td).
As you can see i have no width parameter in css. I get this value from json and then I set it with jquery. Maybe this is the problem? If so, how can i solve it?
#myTable2 td{
white-space: nowrap;
overflow:hidden;
text-overflow:ellipsis;
min-width:47px;
border-top: solid 1px #ebebeb;
border-spacing:none;
cellpadding: 0;
cellspacing: 0;
font-family:arial;
font-size: 8pt;
color: #3D3D3D;
padding: 4px;
}
I test it in Chrome 19, newest Firefox and IE9..
Thanks
You need a width of the table and table-layout:fixed;
http://jsfiddle.net/CagPK/
#myTable2 td{
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
}
#myTable2
{
table-layout:fixed;
width: 100px;
}
text-overflow works with display: block elements, while table cells are display: table-cell elements. Enclosing your text in a <div> should work (fiddle sets the width when you click on the text).