Vuetifyで画面サイズで変わるBreakpointsを使って表示するスタイルや文字数を制限した話 - Qiita

画面サイズ毎に表示する文字数制限したい！！ 今回Vueitfyを使ってレスポンシブな細かいスタイル調整を行おうと思ったんですが 文字列の長さが不明確で且つ改行ありのデザインだったので少々手こずってしまいました。 Vuetifyでうまくやる方法があるのかも知れませんが、今回はこのような形で解決しました。 結論: $vuetify.breakpointとtruncateを使う 概要 $vuetify.breakpointでlgやmdといったブレークポイントを取得 $vuetify.breakpointはtemplate上でも使える styleなどに必要な要素を変数に代入（computedで定義すると動的に変わる） truncateメソッドを使って文字切り捨て cssのtext-overflowは改行無しなら使える！（veutifyのclassならtext-truncate） ※ templat