%でwidthを指定して、文字列の省略を行いたい

Question

長い文字列が画面からはみ出るのを防ぐために、CSSで文字列のある長さ以上の部分を省略し、「...」で置き換えるという書き方があるかと思います。具体的には、

p.overflow {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

というものです。(このページの例です。)

この表記を画面の幅が変わった場合に対応するために、width: 90%;というように%値で指定したいのですが、そうすると上手く切り取ってくれません。短い文字列でも切り取られてしまったり、長い文字列でははみ出してしまったりします。「%値は親要素の幅の相対値だ」と読んだことがあるので、親要素が画面いっぱいの横幅なら上手く行きそうなものなのですが。何かうまい方法はありますでしょうか？

Answer 1

提示されているサイトのコードをそのまま%に変えたら問題なく省略されました。ほかの問題では？

.overflow {
    border: 2px dashed #0c8bcd;
    padding: 5px 15px;
    width: 20%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
```**動くサンプル：**[https://jsfiddle.net/3xwL6Lhk/](https://jsfiddle.net/3xwL6Lhk/)

Answer 2

確かに、この要素だけでの問題ではありませんでした。親要素の幅がうまく設定されていなかったようで、親要素の幅を%指定したところ、うまく動くようになりました。大変お騒がせしました。