文章を左側にoverflowして、省略記号を表示したい

やりたかったこと

タイトルまんま

アプローチ

フレックス

display: flexとjustify-content: flex-endによる実装。

flexBox.html

<div class="box">
    <span class="txt">
        ながぁ〜い文章を左側にoverflowして表示して、省略記号を表示したい
    </span>
</div>

flexBox.css

.box {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    overflow: hidden;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.txt {
    word-break: break-all;
    white-space: nowrap;
    padding: 0 10px;
}

.txt:before {
    content: 'ellipsis'; 
    position: absolute;
    left: 0;
    padding-left: 10px;
    background-color: #fff;
    z-index: 1;
}

IE以外はこれで実現できる。
IEではフレックスコンテナからフレックスアイテムがはみ出した場合、justify-contentやalign-itemsが効かない。

フロート

float: rightによる実装。

float.html

<div class="box_2">
    <div class="float_wrapper">
        <span class="float_txt">
            ながぁ〜い文章を左側にoverflowして表示して、省略記号を表示したい
        </span>
    </div>
</div>

float.css

.box_2 {
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.float_wrapper {
    position: relative;
    width: 100%;
}

.float_txt {
    word-break: break-all;
    white-space: nowrap;
    padding: 0 10px;
    float: right;
}

.float_txt:before {
    position: absolute;
    content: '\02026';
    padding-left: 10px;
    left: 0;
    top: 0;
    background-color: #fff;
    z-index: 1;
}

これでIEでもハッピーになれる。

まとめ

見た目はそれっぽくできるけど、場合によっては文字が欠けたりする。
jsでゴリゴリやって実装する方法もあるみたい。
もっと簡単に実装できる方法ないかなぁ。

参考

https://stackoverflow.com/questions/218065/overflow-to-left-instead-of-right
https://hugogiraudel.com/2014/12/16/css-riddle-reverse-ellipsis/