When exceeding the length of the input, the md-chips creates a new line. I'd like the chips to continue always in one single line and the input to overflow horizontally just as a normal text input. How to achieve this? This answer is not working for me.
Image of the undesired behavior:
If you want to overflow chips with pure css, you can do the following: (PLUNKER)
HTML
<md-chips class="chips-overflow" placeholder="Enter an animal..."></md-chips>
CSS
.chips-overflow .md-chips {
width: 100%;
white-space: nowrap;
overflow-x: auto;
}
.chips-overflow .md-chips md-chip,
.chips-overflow .md-chips .md-chip-input-container {
display: inline-block;
float: none;
}
** This will work perfectly with angularjs-material version >= 1.1.0, and it works but will have problems with placeholder with angularjs-material version >= 0.0.9
Related
I want to place inline-block element right after inline element in case of need to handle very long string that has ellipsis at the end.
Example is the next:
.container {
width: 400px;
overflow: hidden;
text-overflow: ellipsis;
}
.inline-text {
display: inline;
}
.inline-red-icon {
display: inline-block;
width: 20px;
height: 20px;
background: red;
}
<div class="container">
<div class="inline-text">
Onelongstringonelongstringonelongstringonelongstringonelongstringonelongstring
</div>
<div class="inline-red-icon">
</div>
</div>
It provides well-rendered results for regular-length strings in case of single-line and multi-line:
But for very long strings the inline-block will be moved on the next line:
Here is the jsfiddle: https://jsfiddle.net/xrkpspfr/4/
I am trying to put this inline-block after last character, so it should be placed after ellipsis in the case with very long strings. But at this time I can think of only JS-based solution that should calculate the position of last character and make some manipulations with position of inline-block element. It will be even worse if you need some responsive behaviour.
Is there HTML+CSS way to put described red inline-block element after ellipsis without line-break before it?
UPDATE: There is a solution only for the case when you don't need support multi-line strings (thanks to #wadber): using white-space:nowrap; and inline-block in both cases - text block and red square.
See the answer below: https://stackoverflow.com/a/39409698/2474379
Try to add this css rule to the .container:
white-space: nowrap;
Here the updated JSFiddle from vivekkupadhyay
I currently have an ordered list like this one where the numbers and items are centered and left aligned:
I achieved this using this css:
ol
{
padding-left:1em;
padding-right:1em;
display: inline-block;
text-align: left;
word-break: break-word !important;
/*white-space: nowrap*/
}
The problem I am seeing is that it wraps text strangely - it will wrap list items (create a new line) if they are a certain amount longer than the other list items. This creates things like in the picture above (or in text format):
1.Sleeping
Bags
2.Tent
3.Food
4.Stove
5.Jackets
6.Bug Spray
Notice how the Bags is on a new line, but that is not where the div ends. I tried using white-space: nowrap, but obviously that does what it says and long text then continues beyond the div without breaking.
Also, it may just be some sort of browser glitch because sometimes when I hit back and the page is cached it will load correctly, and in safari instead of chrome it seems to work correctly without white-space: nowrap.
Any help / ideas appreciated, or if it is just some weird unfixable thing, I am sorry
You can try Below code:
working demo
div{text-align:center;}
ol
{
padding-left:1em;
padding-right:1em;
display: inline-block;
text-align: left;
word-break: break-word !important;
/*white-space: nowrap*/
}
Give the list a (bigger) width:
ol {
width: 200px;
... rest of CSS
}
As for debugging, I often add a border: 1px solid red; so you can see how far the element extends. If you add it to the ol you'll see that it's width causes the line break. So making it bigger should do the trick.
Hi! When the window is resized, the text automatically wraps to fit its container nicely. For this, I'm using this CSS code:
article {
overflow: auto;
word-wrap: break-word;
}
Though it seems, that this has no effect at all. When I remove this piece of code, the behavior doesn't change: the text is still wrapped near the end of the line.
I'm complaining about the huge gaps between words. I've observed a few webpages where no extra code is used for this and it still works nicely. Can you please help me get rid of the space? Thank you!
I agree that the text-align: justify has been inherited from the parent html tags.
You could also try modifying the CSS as follows:
article {
overflow: auto;
word-wrap: break-word;
text-align: start;
}
As mentioned in the comments article seems to be inheriting text-align: justify;. Here's a way to fix the alignment:
http://jsfiddle.net/awesome/zs394/2/
article, .unjust {
/* regular */
text-align: left;
/* super strength */
text-align: left !important;
}
I have the following:
<div class="backgroundImage">
<div>"Hello world!"</div>
</div>
On Android browsers, "Hello world!" will not be read by Talkback/screen readers when selected. However, if I remove the "backgroundImage" class and select it, it will be read. Is there a way I can continue using the background image but with the text of its child nodes readable? Thanks.
Edit:
.backgroundImage {
height: 400px;
width: 400px;
background-image:url('backgroundImage.png');
overflow: hidden;
display: block;
position: relative;
}
I discovered what was wrong. Looking back, another individual added an opacity=0 style to the elements that I was unaware of; removing this solved the issue.
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