fullcalender.jsの改行について

Question

現在、 fullcarender.jsのプラグインを使用し、googleカレンダーにて複数人で予定の管理を行っております。

現在下記URLのような状態で表示されているのですが、長いタイトルの場合に改行されずに途中で読めなくなってしまいます。

<td>の部分なのですが、予定の「テスト01テスト01...」を<td>内に改行して表示することはできないのでしょうか。

どなたか解決方法をご存知の方がいらっしゃいましたら、ご教示いただけませんでしょうか。

よろしくお願いいたします。

Answer 1

一緒に読み込ませているfullcalender.cssの624行目**.fc-day-grid-event .fc-content**に
white-space:nowrapが指定されている為、テキストの折り返しがされないようになっているだけだと思いますよ。
なので、上記の箇所を

.fc-day-grid-event .fc-content {
  white-space: normal;
}

などに書き換えてやれば折り返されて表示されると思います。

Comments

[duty2810]

ありがとうございます。
すんなり解決できました。助かりました。

[manabufukai]

お役に立てて何よりです^^

Answer 2

文字列が長い場合、... 省略表示をさせて、ツールチップで全体を表示させるという対処法も検討するとよいと思います。

• 指定幅以上の文字列を省略して…つけるCSS【複数行も可】 http://www.02320.net/text-overflow-ellipsis/
• すぐに使える！デザイン・アニメーションともに洗練されたツールチップ９種 http://www.dream-net.org/blog/?p=1749