Cropping long text inside a link

Question

I've created a container which will be holding a couple links. Each link has two things:

1. Text
2. A download link (this can even change later on to an image)

I am able to crop the text when we resize the browser but not completely to what i want.

This text doesn't need to get cropped as it can fit to screen

Text here is getting cropped but it is pushing the span within the link down

Is there any way to avoid the "Download" span from getting pushed down? So basically the text crop for the text in the link should start when it overflows the span. Any ideas on how i can achieve this? Please note that i want the whole line (paragraph tag) to be the link as this is going to be used mostly on mobile devices.

PS: i don't want to use javascript, as i prefer it to be purely with CSS. If that is not possible a short jQuery solution can be used for it.

jsFiddle

HTML

<div class="box-white">
    <p><a href="#"> Short  <span>Download<span class="arrow">&gt;</span></span></a>
    </p>
    <p><a href="#"> Oh My God this description is more like an essay someone do something about this! <span>Download<span class="arrow">&gt;</span></span></a>
    </p>
</div>

CSS

.box-white {
    background: #fff;
    border: 1px solid #B4B7BB;
    border-radius: 10px;
}
.box-white p {
    color: #000;
    border-bottom: 1px solid #B4B7BB;
    font-weight: bold;
    margin: 0;
    padding: 10px;
}
.box-white p a {
    display: block;
    padding: 10px;
    margin: -10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.box-white p span {
    color: #4C556C;
    float: right;
    font-weight: normal;
}
a {
    color: #0085d5;
    text-decoration: none;
}

Thanks

Answer 1

Swapping the order of your description and the download-link-spans should do the trick: Place the float-right span before the actual description.

Based on your fiddle: http://jsfiddle.net/fdyt2/2/

<p><a href="#"> <span>Download<span class="arrow">&gt;</span></span> Oh My God this description is more like an essay someone do something about this! </a>

Using the left margin of the span you can control the distance between the end of the cropped text and the download link.

Here is a screenshot of the result in Chrome: