パンクズの文字数

#breadcrumb span[itemprop="title"] {
    width: 15px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: middle;
}

で動作すると思うので、その固定ページが任意のページなら、

.page-id-(number) #breadcrumb span[itemprop="title"] {
  //略
}

固定ページ全部なら、

.page #breadcrumb span[itemprop="title"] {
  //略
}

とかでいけるんじゃないでしょうか。

HOMEを外すのであれば、

#breadcrumb div:not(:first-child) span[itemprop="title"] {
  //略
}

でイケると思ったんですけども、font-awesomeの部分で折り返しが発生したのでしないように何とかならないものかとサンプル作ってみました。

これでイケると思うんですが…

サンプル: パンくずサイズ固定ではみ出した部分を…に | jsFiddle

#breadcrumb div:not(:first-child) {} 部分では、「ホーム」以外のdivを指定します。
#breadcrumb div:not(:first-child) .fa-fw {} 部分ではデフォルトのファイルアイコンを非表示にします。
#breadcrumb div:not(:first-child) span[itemprop="title"] {} 部分では、…を入れるための設定をしています。
#breadcrumb div:not(:first-child) span[itemprop="title"]::before {} 部分では非表示にしたファイルアイコンをspanの擬似要素として設定してます。

…を出すサイズは、#breadcrumb div:not(:first-child) {} 部分で行います。サンプルでは100px以上のサイズにリンク部分がなると…が自動で表示されます。つまり、このdivが親になり、そのサイズを中身のspanのサイズがはみ出すと…が表示されると言うわけです。

…が必要なく、単純に非表示にしたい場合は、
text-overflow: ellipsis; を text-overflow: clip; にします。

こんな感じでどうでしょうか？

こんにちは。
カテゴリーに長い前がついてるので
パンクズの各カテゴリーもしくは固定ページの文字数が20文字以上になったら,,,にするなどしたかったんです。

なので、hidekichさんの方法で無事できました。
ありがとうございました

Css以外の方法もあれば、是非知りたいのでよろしくお願いいたします

例えばjQueryでもできます。

サンプル: 文字を省略した内容の親のaに元のタイトルをつけてマウスオーバーで表示 | jsFiddle

文字を省略してしまうと元のタイトルが何であったかがわからなくなってしまうので、マウスオーバーの時にはそれが表示するようにしたりもできます。

ありがとうございます

色々試してみます