How can I handle the css that I need to set up overflow: unset to let me poptip display when hovering and also display ellipsis once data in cell is oversize?
I have following HTML under my table. In order to make sure div element pop up a warning message that does not cover by td element when hovering on span element. I have to set overflow: unset on td level.
After setting that up, it seems like text-overflow does not work anymore?
Suggestion?
I check some posts and all mentioned about overflow: hidden
so i am wondering if any solution for me?
Apply "text-overflow: ellipsis;" to inner div
and
List Overflow; Do text-overflow: ellipsis;
My code:
.tr .td {
position: sticky
overflow: unset;
z-index: 2;
white-space: nowrap;
text-overflow: ellipsis;
}
<tr>
<td class="td" role="cell" style="position: sticky; left: 46px;">
<span class="data" aria-expanded="false">
cell data
<div class="poptip" role="tooltip" aria-hidden="true"></div>
</span>
</td>
</tr>
Related
I'm trying to create a text-overflow: ellipsis; from the beginning, but in some specific context, it reverses the characters.
This is a CodePen to illustrate the problem: https://codepen.io/DWboutin/pen/yLaoxog
HTML:
<div class="ellipsis">Path to you prefered files that you love so much forever and ever fuck yeah</div>
<div class="ellipsis">1":"#323130",messageLink:t?"#6CB8F6":"#005A9E",messageLinkHovered:t?"#82C7FF":"#004578",infoIcon:t?"#</div>
CSS:
div {
margin: 10px 0;
border: 1px solid black;
}
.ellipsis {
width: 400px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
direction: rtl;
}
I tried all word-break properties, wrapping the string into another span to force it to be ltr but it don't work.
Thank you for your help
unicode-bidi might help you with an extra wrapper to handle text direction:
https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi
The unicode-bidi CSS property, together with the direction property, determines how bidirectional text in a document is handled. For example, if a block of content contains both left-to-right and right-to-left text, the user-agent uses a complex Unicode algorithm to decide how to display the text. The unicode-bidi property overrides this algorithm and allows the developer to control the text embedding.
div {
margin: 10px 0;
border: 1px solid black;
width:max-content;
}
.ellipsis {
width: 400px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
direction: rtl;
}
.ellipsis span {
direction: ltr;
unicode-bidi: bidi-override;
}
<div class="ellipsis">Path to you prefered files that you love so much forever and ever fuck yeah</div>
<div class="ellipsis"><span>1":"#323130",messageLink:t?"#6CB8F6":"#005A9E",messageLinkHovered:t?"#82C7FF":"#004578",infoIcon:t?"#</span></div>
original text :
<div>Path to you prefered files that you love so much forever and ever fuck yeah</div>
<div><span>1":"#323130",messageLink:t?"#6CB8F6":"#005A9E",messageLinkHovered:t?"#82C7FF":"#004578",infoIcon:t?"#</span></div>
Note, that extra wrapper needs to remain an inline element (display:inline) , an inline-box will not be part of the ellipsis rule but will overflow to the left, a block element will overflow on the right.
I would like to constraint table columns width with no text clipping (no wrapping).
I came accross many many threads on Stackoverflow (sorry for duplicates), but none of them really gives straightforward solutions, even though I believe it is a rather simple issue...
First all of all, do I have to contrainst both header and content column width ?
I don't really want to insert div inside th / td (I haven't found straightforward solution anyway).
I believe that the white-space: nowrap; and text-overflow: clip; table styles width <th style="width: 100px>...</th> (idem td) would be enought, but it doesn't work). Does the CSS order of them matter?
I don't understand why something as simple as follows doesn't work..
<th style="width: 72px; text-overflow: clip; white-space: nowrap;">ABCDEFGHIJKLMNOPQRSTUVWXY abcdefghijklmnopqrstuvwyz</th><!-- Of course, specified in CSS file -->
and would like to see something like:
----------------
|ABCDEFG|
----------------
UPDATE
CSS styles
th {
max-width: 72px;
white-space: nowrap;
text-overflow: clip;
overflow: hidden;
}
td {
max-width: 72px;
white-space: nowrap;
text-overflow: clip;
overflow: hidden;
}
Razor page
<tH #Html.Raw(Helpers.HTMLTagAttribute(Enums.FieldType.Date))>
...
<td #Html.Raw(Helpers.HTMLTagAttribute(Enums.FieldType.Date))>
...
Where the helper method HTMLBodyTagStyleAttributes(FieldType fieldType) uses the HTMLWidth(FieldType fieldType) defined as follows with FieldType an enum relative to each column:
private static string HTMLWidth(FieldType fieldType)
{
string width;
switch (fieldType)
{
case FieldType.Date:
width = "72px";
break;
// ...
default:
width = "86px";
break;
}
return width != "" ? $"max-width: {width};" : "";
}
Thanks for any insights!
try adding a max-width and overflow: hidden, e.g.:
th {
max-width: 72px;
text-overflow: clip;
white-space: nowrap;
overflow: hidden;
}
Fix the header only. Not the cell.
Use CSS properties word-wrap and word-break
div {
word-wrap: break-word;
word-break: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
I'm coding some CSS within SharePoint 365, and here I'm trying to do this:
https://codepen.io/srekoble/pen/EgmyxV
I have it working perfectly in Chrome, and even on the codepen version. However when it gets applied to my live edition, it simply doesnt hide the text when the max-width limit is reached.
Here is my own code.
td.ms-cellstyle.ms-vb2 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 50px;
}
Here is the result:
Image
As it appears, the CSS rule does not seem to apply on IE, and does not limit the text to display.
Here is the HTML for the block.
<td class="ms-cellstyle ms-vb2" role="gridcell" style="overflow: hidden; display: inline-block; white-space: nowrap; text-overflow: ellipsis; max-width: 20px;"><a class="ms-listlink" onclick="EditLink2(this,21);return false;" onfocus="OnLink(this)" href="https://rosendahldesigngroup.sharepoint.com/_layouts/15/listform.aspx?PageType=4&ListId=%7BA8CAC965%2D8031%2D43A4%2DAD23%2D0DD14BE6012D%7D&ID=116&ContentTypeID=0x010200283C7299F6299B4D99C5E4ACE117C0C1" target="_self">BFA arr. HHX innovation og designlinie i Lyngby</a><span class="ms-newdocument-iconouter"><img title="new" class="ms-newdocument-icon" alt="new" src="/_layouts/15/images/spcommon.png?rev=44"></span></td>
I'm trying to truncate the text that displays from an <a> tag but it isn't working. I applied the styling to other tag styles and it did work (none of the examples I saw used an <a> tag either). I was wondering if someone could explain to me why this is happening (I'm not the best at HTML/CSS) and help me get it working. Here is my code.
If it helps to know I'm also using .less.
CSS:
.blockTrunc{
width: 30px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
HTML:
<a class="blockTrunc" href="#" >
<i class="icon " ></i>{{{this.foo}}}: test length adder <span>{{this.bar}}-{{this.fizz}}</span>
</a>
You can't apply text-overflow: ellipsis; to inline elements. You can change the a to display: inline-block; and it should then work.
CSS:
.blockTrunc{
display: inline-block;
width: 30px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
JS Fiddle: http://jsfiddle.net/z6cm4gcw/
W3 text-overflow docs states:
Applies to: block containers
So, you'll have make it a block container, either setting it's display property as a inline-block or block.
Updated JsFiddle
i've resolved wrapping your "A" element with a DIV with the class you have used:
<div class="blockTrunc">
<a href="#" >
<i class="icon " ></i>{{{this.foo}}}: test length adder <span>{{this.bar}}-{{this.fizz}}</span>
</a>
</div>
http://jsfiddle.net/z6cm4gcw/
I do have a table where I want to show the complete cell-content on hover.
I got this working with css, but now I'm facing a bug with all browsers except Chrome.
HTML extract:
<table><tr>
<td class="hover-text" style="width: 99px">
<div style="width: 99px">A long text</div>
</td>
</tr></table>
CSS extract:
.hover-text div{
text-overflow: ellipsis;
}
.hover-text:hover div{
overflow: visible;
z-index: 1;
width: auto !important;
position: absolute;
}
This works all fine, except if I use any browser but Chrome, there is just one row and there is a horizontal scroll-bar. Then the cells are strangely resized. Without one of this conditions, I got no problems. Unfortunately the HTML is given from the framework I use.
I tried all sort of things, but at this point I'm at a loss..
You can see this issue here if you resize the table so that there is no horizontal scroll-bar, everything works as expected.
Your td element has a class of "hover-text" whereas your CSS uses the selector .text-hover. This means that the CSS you've provided has no affect on the HTML you've provided.
To fix this, either change your td element's class to "text-hover" or change your CSS selectors to .hover-text.
I have adjusted your CSS, Now its working fine for me.
Working Demo
CSS
.hover-text div{
text-overflow: ellipsis;
overflow:hidden;
white-space:nowrap;
width:100%;
}
.hover-text:hover div{
overflow: visible;
z-index: 1;
width: auto !important;
position: absolute;
}
Please mind the names you keep in html markup and you use in css. Even a professional may confuse this way.
.hover-text div{
text-overflow: ellipsis;
}
.hover-text:hover div{
overflow: visible;
z-index: 1;
width: auto !important;
position: absolute;
}
Found a solution: http://jsfiddle.net/FmY5R/10/
td{
display: inline-block
}
But I'm still not sure what caused the bug..