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>
Related
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>
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 am currently trying to display the word from ADIDAS SUPERSTAR LIMITED EDITION* to **ADIDAS SUPERSTAR.....** by using CSS. When i tried to use break-word in css but does not work for it. How can i do that?
I think you want to use text-overflow:
.title {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
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..
I was trying to make a link restricted to a width using the ellipsis.
The html is something like this:
<a class="blueLink2 destination-url-space" style="top:0;" href="http://google.com/uyv245">http://google.com/iuh345345345gthrthrthrth</a>
and the CSS is
.blueLink2 {
color: #0051A1;
display: inline;
font-size: 14px;
margin-left: 5px;
overflow: hidden;
position: relative;
text-overflow: ellipsis;
top: 0;
}
.destination-url-space {
display: inline-block;
max-width: 200px;
overflow-x: hidden;
}
But it's working only in Chrome. Not working in Firefox.
Demo: http://jsfiddle.net/xE6HG/
you need to add white-space: nowrap; there
DEMO
p{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-moz-binding: url('ellipsis.xml#ellipsis');
}
<p>
Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout.
</p>
<p>
Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout.
</p>