html - リンク内の長いテキストのトリミング

Question

いくつかのリンクを保持するコンテナを作成しました。各リンクには次の 2 つがあります。

1. 文章
2. ダウンロード リンク (後で画像に変更することもできます)

ブラウザのサイズを変更すると、テキストをトリミングできますが、完全にはトリミングできません。

このテキストは画面に収まるため、切り取る必要はありません

ここのテキストはトリミングされていますが、リンク内のスパンが押し下げられています

「ダウンロード」spanが押し下げられないようにする方法はありますか? したがって、基本的に、リンク内のテキストのテキスト トリミングは、オーバーフローしたときに開始する必要がありspanます。どうすればこれを達成できるかについてのアイデアはありますか? これは主にモバイル デバイスで使用されるため、行全体 (段落タグ) をリンクにしたいことに注意してください。

PS: 純粋に CSS を使用したいので、javascript を使用したくありません。それが不可能な場合は、短い jQuery ソリューションを使用できます。

jsフィドル

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;
}

ありがとう