自動改行と入りきらない文字列の省略

質問

overflow: hiddenとword-break: break-allを使い、
　　・入りきるまでを改行
　　・最後入らない文字列を省略、最後を「...」に、

（例）こんな感じです↓↓
｜￣￣￣￣￣￣￣￣￣｜
｜aaaaaaaaaaaaaaaaaa |　　←改行
｜aaaaaaaaaaaaaaaaa... |　　←省略、「...」
｜＿＿＿＿＿＿＿＿＿｜

ということをしたいんですが、overflow: hiddenを使うと、
word-break: break-allが機能しません。

両方を1度に使うことは出来ないんでしょうか？
また、解決策はありますか？

回答No.1

think49 · ベストアンサー

矛盾した動作を期待していることに気が付いているでしょうか？

「overflow: hidden」と「word-break: break-all」は一方を優先すればもう一方が機能しない相反するものです。
「1行目では改行し、2行目では改行しない」という動作を実現するためには対象の要素の「1行目」と「2行目以降」で優先順位を逆転させなければなりません。

/* 規定値は overflow: hidden; にする */
#Sample { overflow: hidden; }
/* 1行目だけは overflow: visible; にする */
#Sample:first-line { overflow: visible; word-break: break-all; }

これは動きません。overflow は要素に適用するものだからです。
http://jsbin.com/axoyu5/1

# 1行目と2行目以降を別々の要素に入れることが出来れば可能だと思いますが…。

お礼

詳しく教えてくれてありがとうございました。

回答No.2

think49

#1 です。

ブロックレベル要素を入れ子にして役割分担すればいけますね。
http://jsbin.com/axoyu5/2