I have a problem with a mat-select propriety "ellipsis".
the 3 points are of a different color than the text color. I tried to do but they continue to be 3 black dots instead to be white
::ngdeep .example{
color: white
}
it seems like the it seems that the values of the various css overlap, you can add "::ng-deep" and "!important" , it worked for me . Try to use a snippet like this in your CSS:
::ng-deep .mat-select .mat-select-value-text {
color: white !important;
}
Elipssis works with width and overflow hidden, here is a code you can try
.example{
white-space: nowrap;
width: 50px;
overflow: hidden;
text-overflow: ellipsis; }
Thanks
Related
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.
This is the example:
<style>
div {
background-color: skyblue;
height: 100px;
}
.posttext {
word-wrap: break-word;
-ms-hyphenate-limit-lines: 10;
text-overflow: ellipsis;
}
</style>
<div>
<p class="posttext">---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8--------</p>
</div>
When you decrease the width of your browser enough the text will continue to show under the blue colored div. I found a way to stop it using 'text-overflow: ellipsis' but it stops at the first line.
Is it possible to make it continue until it reaches the height of the div and then show three dots at the end rather than continuing under it?
Below properties are useful when you want to show ellipsis at the end of single line.
div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Since you are looking for multi line ellipsis (which is not directly available in CSS), I think below link might help you :
https://codepen.io/martinwolf/pen/qlFdp
There is also one Jquery plugin available which can be used :
https://tpgblog.com/threedots/
Recently I have been having a few issues with using a content editable div as a text box for a project I have been working on. The project is built with Angular2 on the front-end.
The issue I have been having is when I go to tab/space all the way to the end of the content editable div, rather than moving to the next line, it instead keeps adding tabs that appear to accumulate in the text content of the div. By that I mean, if I hit the tab/space key 4 times once it reaches the end, I will then have to backspace 4 times to clear them out.
<div class="text-box" contenteditable="true"></div>
body
{
background-color: black;
}
.text-box
{
background-color: white;
color: black;
height: 200px;
width: 200px;
margin: auto;
white-space: pre-wrap;
}
https://codepen.io/anon/pen/YxYNYW
The code pen I included demonstrates the issue. If you just click inside the box and then hold space bar, once the cursor gets to the end, it will not move to a newline. I realize it has something to do with the white-space: pre-wrap property I use with the content editable div. Is there anyway to get this to work while still being able to use that property?
I would like to keep the pre-wrap property because it preserves all the white-space that is brought in from objects with text in the database. I tried it with the pre-line property over pre-wrap but that caused the text to jump when clicking into the editable div. I also tried using word-break: break-all which seemed to work but then the text gets a little messed up.
Also on a side note, has anyone ever experienced an issue where they were unable to click between characters once the text was highlighted? This is kind of a weird issue to describe, and a tough one to track down apparently. What happens is I will type some text into the div, highlight it with my cursor, and then if I try to deselect the text by clicking in between characters, it will not work. I will have to click a line that is currently not highlighted or outside of the element entirely to deselect any highlighted text.
I originally thought maybe it was a content editable issue, but it seems to be working fine in the code pen I linked, so now I am not sure what it is.
Thanks in advance for the help!
You have to use word-break for solving your issue.Modify your css like following
body
{
background-color: black;
}
.text-box
{
background-color: white;
color: black;
height: 200px;
width:150px;
margin: auto;
white-space: pre-wrap;
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* css-3 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
word-break: break-word;
white-space: normal;
}
This solves your problem.Here is the working pen pen
Please reffer this ans for more info
I have managed to remove the text area border but I want it so the user cant see a border even when they click on it. This is my css as of yet.
.comments{
border: 0 none #FFF;
overflow: hidden;
}
I tried making the border transparent, I tried this also but it doesn't work either, also tried it with other attributes active etc.
.comments:focus{
border: 0 none #FFF;
overflow: hidden;
}
Is it possible to remove the border when focused on?
The border isn't visible until the textarea is clicked on btw. So border none does work
You need to set outline:none for the textarea.
.comments:focus{
border: 0 none #FFF;
overflow: hidden;
outline:none;
}
Js Fiddle Demo
textarea, input { outline: none; }
I have a simple two-word header, from which I would like to remove or hide the last word, instead of wrapping it to the next line, when there is not enough room in the window for both words.
<h1>First Last</h1>
I know that there are no first-word selectors for css, so that's not an option. I could hide the overflow, but I want the last word to disappear all at once, not letter by letter. And of course, white-space:nowrap; comes to mind, but that doesn't remove the word.
Is there a way to do this with css? Preferably without fixed heights or widths?
http://jsfiddle.net/pnaL4/2/
There is no possibility to select a last word from a tag. The only possibility I could think of was to use a media query that loads this custom CSS when the line size is too small:
h1 {
visibility: hidden;
}
h1:before {
visibility: visible;
content: "First";
}
Of course, this would require you to specify the showed content.
Simple. Use a white-space:nowrap; CSS Property.
h1 {
white-space: nowrap;
}
This will ensure that even if the window resizes, the text will not wrap down and get hidden as the window shrinks.
Here is the WORKING DEMO to illustrate the issue.
I ususally do something like
h1 {
font-size: 250px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 745px;
}
ellipsis outputs ... to show there is more text to come, if you don't want anything at all I would do
text-overflow: inherit;
another good tip if you are cutting of text is to add a title attribute to the h1 so that the user can see the full word on hover.
eg
<h1 title="First Last">First Last</h1>
If you let the overflowing word(s) break to the next line, you can use an overflow with a height instead of width to create that effect:
h1 {
height: 30px;
overflow: hidden;
}
Example