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;
}
Related
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 using ngx-treeview component in my angular 6 project. My tree-view items are very lengthy. So, I'm trying to apply text-overflow:ellipsis in the ./treeview-container .row-item. snippet goes like this
:host /deep/ .treeview-container .row-item {
margin-bottom: .3rem;
flex-wrap: nowrap;
width:100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
width is set to 100px and my text is truncated but the ellipsis is not applied. Could you support me in applying custom css?
Also I need to display full text on hovering. Does ":hover" works on treeview-item?
PS: I tried the same for ./treeview-item also but didn't work.
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 want to wrap my long article in to three to four lines and a more button below. Currently, i am using the below css code.
.truncate {
width: auto;
text-align: justify;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
The above css class does what i want . However, it shortens the artcile to a single line code code only. I tried everything possible to make it in to three or four and half lines and din't succeed. I thought of adding a height property and didn't change. please how do i control the number of lines. ? Any help would be appreciated.
Update
Just like on SO here . A question title, and just two lines from the post. Please how do i achieve that ?
You can use -webkit-line-clamp: 2; -webkit-box-orient: vertical;. But it's only for webkit browsers.
http://jsfiddle.net/tv2mfxe5/1/
.truncate {
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
And if this doesn't work for you. I would recommend using a jQuery plugin, dot dot dot
How do I get the ellipsis in second line with pure CSS?
here is the CSS am using now
.desc p{
display: table-cell;
width:90%;
vertical-align: middle;
height:30px ;
overflow: hidden;
text-overflow: ellipsis;
}
CSS does not currently support multilines. You need to use JavaScript or jQuery. I recommend the dotdotdot jQuery plugin.