I need to put "..." in the front of text and show only last part of it, when it fills div.
And do nothing when it is normal
<span class="file-upload-status" style="max-width:200px">
C:\fakepath\996571_1398802860346752_2094565473_n.jpg
</span>
<br/>
<span class="file-upload-status" style="max-width:200px">
C:\fakepath\1.jpg
</span>
Here is what i have : http://jsfiddle.net/CBUH4/5/
Here is what i need :
Is it possible to do by Css, without using JavaScript or jQuery.
Maybe something like this: http://jsfiddle.net/CBUH4/8/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
This is the closest solution I could have got using just css. Still it has a drawback that we need to use multiple .'s which are approximately equal to the width of the span element.
Fiddle
HTML
<span class="file-upload-status ellipsis" style="max-width:200px">
C:\fakepath\996571_1398802860346752_2094565473_n.jpg
</span>
<br/>
<span class="file-upload-status" style="max-width:200px">
C:\fakepath\1.jpg
</span>
CSS
.file-upload-status {
font-weight: bold;
font-size: 16px;
color: #888;
background: #fff;
border-radius: 7px;
height: 27px;
border: 1px solid #ccc;
padding-left: 5px;
padding-right: 5px;
white-space: nowrap;
overflow: hidden;
direction: rtl;
display:inline-block;
width: 200px;
position: relative;
}
.file-upload-status:after {
content:".................................";
color: white;
position: relative;
background-color: white;
z-index: 2;
}
.file-upload-status:before {
content:"...";
position:absolute;
background-color: white;
left: 0px;
top: 0px;
z-index: 1;
}
Suggestion: Give as much dots as possible :D
Related
THIS IS A DUPLICATE OF MY CLOSED QUESTION, BUT THE DUPLICATES ARE IRRELEVANT
First "duplicate"
It does not look at the class though, only the type, so if you happen to have non-articles with the same class you'll get unexpected results
Second "duplicate" is entirely something else.
Third "duplicate" is the explanation of why my try didn't work.
Fourth "duplicate" gives a workaround for the first element, not the last.
I have understood that there is no CSS selector for that, I juste want a solution. Be mindful of that before closing my question !
I have 5 buttons. They have an underlayer that make them seem they are active, as you will see in the snippet.
Each button can have an active state, but only starting from 1, and ending anywhere to 5.
They all have a divider, displayed in red in the snippet.
I would like to keep the divider into the underlayer, outside of the underlayer, but I would like to make it disappear at the end of the underlayer (in snippet, after button #2).
Following my first question, I understood that there is no CSS selector to do that. So what would be the best way to tackle this issue ?
.container {
display: flex;
align-items: stretch;
justify-content: start
margin: 12px;
position: relative;
}
button:after {
content: '';
height: 100%;
position: absolute;
background: red;
left: calc(100% + 12px);
width: 1px;
top: 0;
}
button.active:last-child:after {
content: none;
}
button {
flex: 0 0 calc(20% - 24px);
border: 0;
height: 32px;
color: black;
text-transform: uppercase;
text-align: center;
margin-right: 24px;
background: transparent;
position: relative;
}
button.active {
color: white;
}
.active-pill {
background: teal;
position: absolute;
height: 32px;
border-radius: 16px;
background: teal;
width: calc(40% - 12px);
z-index: -1;
}
<div class="container">
<div class="active-pill"></div>
<button class="active">Step 1</button>
<button class="active">Step 2</button>
<button>Step 3</button>
<button>Step 4</button>
<button>Step 5</button>
</div>
<h3>
Which selector to use to remove the content after button #2 ?
</h3>
In this particular case: Just put the divider on the left side of the buttons, instead of the right?
Then the one that doesn’t need one, becomes the first non-active one after the active ones, so it can easily be selected using button.active + button:not(.active):after
The first button here technically has a divider to the left as well then, that gets cut off here when the snippet gets rendered anyway. But in a situation where you’d need to explicitly “eliminate” it, you could still go with just plain and simple :first-child here (I’m assuming if there’s active buttons, it always starts with the first one, right?)
This is a bit similar to what Hao suggested in their answer, but with their version, the divider gets placed on the right on some buttons, on the left on others … I’d prefer to simply have it the same on all.
.container {
display: flex;
align-items: stretch;
justify-content: start
margin: 12px;
position: relative;
}
button:after {
content: '';
height: 100%;
position: absolute;
background: red;
right: calc(100% + 12px);
width: 1px;
top: 0;
}
button.active + button:not(.active):after {
content: none;
}
button {
flex: 0 0 calc(20% - 24px);
border: 0;
height: 32px;
color: black;
text-transform: uppercase;
text-align: center;
margin-right: 24px;
background: transparent;
position: relative;
}
button.active {
color: white;
}
.active-pill {
background: teal;
position: absolute;
height: 32px;
border-radius: 16px;
background: teal;
width: calc(40% - 12px);
z-index: -1;
}
<div class="container">
<div class="active-pill"></div>
<button class="active">Step 1</button>
<button class="active">Step 2</button>
<button>Step 3</button>
<button>Step 4</button>
<button>Step 5</button>
</div>
<h3>
Which selector to use to remove the content after button #2 ?
</h3>
Unfortunately, in pure css there is no way to select the last element with a specific class.
There are loads of possible solutions to your issue however. To name a few:
Since you can define your own tag-names in HTML5, you can rename the button elements with the active class to activebutton. That way you can target them with the :last-of-type selector. This might be the closest to what you are trying here. You could get rid of the underlayer as well...
You could indicate the active element in it's parent. In this case the container, and target the nth child.
You could add an extra class to the last active element in your html
You could go the javascript route...
.container {
display: flex;
align-items: stretch;
justify-content: start
position: relative;
margin-bottom: 12px;
}
button ,
buttona,
span{
padding: 0 50px;
border: 0;
height: 32px;
font-family: 'system-ui';
font-size: 11px;
line-height: 32px;
color: black;
text-transform: uppercase;
text-align: center;
background: transparent;
position: relative;
}
buttona,
span{
background: teal;
color: white;
}
button:after,
buttona:after,
span:after{
content: '';
height: 100%;
position: absolute;
background: red;
right: 0;
width: 1px;
top: 0;
}
buttona:first-of-type,
span:first-of-type{
border-top-left-radius: 16px;
border-bottom-left-radius: 16px;
}
buttona:last-of-type,
span:last-of-type{
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
}
buttona:last-of-type:after,
span:last-of-type:after{
display: none;
}
<div class="container">
<buttona>1</buttona>
<buttona>2</buttona>
<button>3</button>
<button>4</button>
<button>5</button>
</div>
<div class="container">
<span>1</span>
<span>2</span>
<span>3</span>
<button>4</button>
<button>5</button>
</div>
I have to following code:
<div class="playlist-item">
<a class="playlist-non-selected" href="#">
<span class="playlist-title">AudioAgent - Japanese Intro</span>
</a>
</div>
https://jsfiddle.net/4uyb7rh9/10/
The problem is when you rollover the text, in firefox and ie overPlaylistItem & outPlaylistItem are constantly called and cursor just keeps flickering. This works properly in chrome. Is there a way to make this work in all browsers?
This happens because when you set the class having pointer-events: none it triggers a mouse leave event, hence it flashes.
First of all, may I suggest you use :hover, second, whether you use :hover or script, you need to target the specific element that shouldn't be clickable, for example the span
.playlist-non-selected:hover span {
pointer-events: none;
}
Stack snippet
.playlist-item {
position: relative;
top: 0px;
left: 0px;
height: 40px;
margin-bottom: 5px;
overflow: hidden;
line-height: 40px;
}
.playlist-title {
display: inline-block;
position: relative;
top: 0px;
margin-left: 20px;
overflow: hidden;
font-size: 22px;
font-family: 'Gnuolane Free';
margin-bottom: 0px;
}
.playlist-non-selected {
color: #bbb;
}
.playlist-non-selected:hover{
color: red;
}
.playlist-non-selected:hover span{
pointer-events: none;
}
<div class="playlist-item">
<a class="playlist-non-selected" href="#">
<span class="playlist-title">AudioAgent - Japanese Intro</span>
</a>
</div>
And here is an updated fiddle using your script
Update based on comment about not working in Edge
Appears to be some kind of bug in Edge when the span has display: block so changing it to display: inline-block and it works.
For it to work in IE11, the span need display: inline (or just remove the display:...) so it use its default.
Update 2 based on comment about not working in Edge
If you need the span to display as block, changing it to a div and it works in both Edge and IE11.
An updated fiddle using your script
Why haven't you used :hover ? This can be done with CSS easily and will not pose any difficulty for browsers compatability like
.playlist-item {
position: relative;
top: 0px;
left: 0px;
height: 40px;
margin-bottom: 5px;
overflow: hidden;
line-height: 40px;
}
.playlist-title {
display: block;
position: relative;
top: 0px;
margin-left: 20px;
overflow: hidden;
font-size: 22px;
font-family: 'Gnuolane Free';
margin-bottom: 0px;
backface-visibility:hidden
}
.playlist-non-selected:hover{
color: red;
pointer-events: none;
backface-visibility:hidden
}
.playlist-non-selected {
color: #bbb;
}
<div class="playlist-item">
<a class="playlist-non-selected" href="#">
<span class="playlist-title">AudioAgent - Japanese Intro</span>
</a>
</div>
I have 2 words in a circular submit button that I want stacked on top of each other instead of side by side. I tried "word-wrap:break-word;", but this coding is width and height contingent.
I'd rather not create an image for the submit button as I'm sure there is a way to achieve this with CSS. Thank you for any help!
It's a Mail Chimp sign up form
HTML
<div class="clear"><input type="submit" value="Get It!" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
CSS
.button {
font-family: 'Lobster', Helvetica Neue, Helvetica, Arial, sans-serif;
text-shadow: 1px 1px #000;
font-size: 1.8em;
letter-spacing: .03em;
color: #fff;
background-color: #f8a8a1;
border: 2px solid #f8a8a1;
padding: 0em 0.3em;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 50px;
display: inline-block;
margin: 0;
height:74px;
width:74px;
word-wrap:break-word;
position: absolute;
margin: -1em 0em;
line-height:1em;
}
Setting word-spacing equal to the width of the container will do this for you.
button {
font-size: 1em;
width: 200px;
word-spacing: 200px;
}
http://jsfiddle.net/x2y4m78k/
You can use a br tag in it: JS Fiddle
<button>Stack<br>words</button>
HTML
<button class="myButton">
<p class="word-one">TopWord</p>
<p class="word-two">BottomWord</p>
</button>
CSS
.myButton{
position:relative;
width:50px; /*whatever dimensions you want*/
height:50px;
}
.word-one{
position:absolute;
top:0px;
left:10px;
}
.word-two{
position:absolute;
top:20px;
left:10px;
}
If you need to use CSS over HTML, and do not want it to be width & height contingent, the only way that I can think of doing this is using the :before and :after pseudo elements.
One thing I am not too sure about is how to center those elements, so you will have to play around a bit
#submit {
height: 50px;
width: 250px;
position: relative;
}
#submit:before {
content: "Top Row";
position: absolute;
top: 0;
left: 0;
}
#submit:after {
content: "Bottom Row";
position: absolute;
bottom: 0;
left: 0;
}
<button id="submit"></button>
I'm using basically this method here: https://coderwall.com/p/uer3ow to style my file input section but it doesn't seem to work in IE8; all I see is the corner of a huge button.
HTML:
<div class="upload_btn">
<span>Choose File</span>
<input type="file" name="item_file_upload_1" id="item_file_upload_1">
</div>
CSS:
.forms .upload_btn {
position: relative;
display: inline-block;
text-align: center;
width: 97px;
height: 27px;
font-weight: 300;
font-size: 16px;
line-height: 27px;
color: #393d59;
border: 2px solid #b9c0d6;
overflow: hidden;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.forms .upload_btn > input[type="file"] {
position: absolute;
cursor: pointer;
top: 0;
right: 0;
font-size: 200px;
opacity: 0;
}
Ok, with a modification of this answer: https://stackoverflow.com/a/1948200/472501
I was able to apply the following CSS for IE8 which fixed the problem:
.forms .upload_btn > input[type="file"] {
filter: alpha(opacity=0);
}
There's a much better, cross-browser compliant, semantic, fully accessible and CSS-only way using the label technique. Great post here on how to implement: https://benmarshall.me/styling-file-inputs/
i've a clickable heart icon and i've a number at his right. I want the number to change everytime i click the heart. Do you know how can i achieve that? i'm messing around with PHP and CSS. The codes are these ones:
<span class="like-post" title="Like">
<span class="icon"> </span>
<span class="number"> 0 </span>
</span>
and the style.css
.like-post {
font-size: 11px;
font-weight: bold;
color: #555;
display: inline-block;
cursor: pointer;
width: 28px;
height: 15px;
margin-left:3px;
}
.icon {
display: block;
width: 15px;
height: 15px;
position:relative;
top: 3px;
left:1px;
background: url('images/heart15.png');
}
.number {
display: BLOCK;
float: right;
position: relative;
top: -14px;
}
thanks!
You could write some jQuery to send an AJAX request to your PHP script on a .click() event and use .text() to change the number with the result from AJAX.