djangoでフォントサイズを自動調整できるようにしたい

djangoで制作途中のものがあるのですが、店舗名のところで文字数が多いと改行してしまい、画像がズレて気持ち悪いです。改行せずに、その分フォントサイズを小さくして一行に収めるにはにはどうすれば良いでしょうか？

「煮干し拉麺アンチョビー」の伸ばし棒のことです。

最大文字数を指定して一部表示させないようにしても良いのですが、フォントを小さくしてできるだけフルネームで表示させたいです。

base.html

python
1{% load static %}
2
3<!DOCTYPE html>
4<html lang="en">
5  <head>
6    <meta charset="utf-8" />
7    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
8    <meta name="description" content="" />
9    <meta name="author" content="" />
10    <title>Small Business - Start Bootstrap Template</title>
11    <!-- Favicon-->
12    <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
13    <!-- Core theme CSS (includes Bootstrap)-->
14    <link href="{% static 'css/styles.css' %}" rel="stylesheet" />
15    {% block head %}{% endblock %}
16  </head>
17
18  <body>
19  <!--ヘッダーの追加-->
20      <!--ナビゲーションバー-->
21      <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
22        <div class="container px-5">
23            <a class="navbar-brand" href="{% url 'shoplist:index' %}">kohriInfo</a>
24            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
25            <div class="collapse navbar-collapse" id="navbarSupportedContent">
26                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
27                    <li class="nav-item"><a class="nav-link active" aria-current="page" href="{% url 'shoplist:index' %}">shopInfo</a></li>
28                    <li class="nav-item"><a class="nav-link" href="#!">community</a></li>
29                    <li class="nav-item"><a class="nav-link" href="#!">Contact</a></li>
30                    <li class="nav-item"><a class="nav-link" href="#!">Contact</a></li>
31                </ul>
32            </div>
33        </div>
34    </nav>
35  <header>
36    {% block header %}{% endblock %}
37  </header>
38
39  <!--メインの追加-->
40  <main class="container px-4 px-lg-5">
41    {% block main %}{% endblock %}
42  </main>
43
44  <!--フッターの追加-->
45  <footer class="py-5 bg-dark">
46    <div class="container px-4 px-lg-5"><p class="m-0 text-center text-white">Copyright &copy; Your Website 2021</p></div>
47    {% block footer %}
48    {% endblock %}
49  </footer>
50  <!-- Bootstrap core JS-->
51  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
52  <!-- Core theme JS-->
53  <script src="{% static 'js/scripts.js' %}"></script>
54  </body>
55</html>

index.html

python
1{% extends "base.html" %}
2{% load static %}
3    {% block header %}
4        <!-- Responsive navbar-->
5 <!-- Page Content-->
6        <div class="container px-4 px-lg-5">
7            <!-- Heading Row-->
8            <div class="row gx-4 gx-lg-5 align-items-center my-5">
9                <div class="col-lg-7"><img class="img-fluid rounded mb-4 mb-lg-0" src="{% static 'image/けやき通り.jpg' %}" alt="..." width="990" height="400" /></div>
10                <div class="col-lg-5">
11                    <h1 class="font-weight-light">Business Name or Tagline</h1>
12                    <p>This is a template that is great for small businesses. It doesn't have too much fancy flare to it, but it makes a great use of the standard Bootstrap core components. Feel free to use this template for any project you want!</p>
13                    <a class="btn btn-primary" href="#!">Call to Action!</a>
14                </div>
15            </div>
16            <!-- Call to Action-->
17            <div class="card text-white bg-secondary my-5 py-4 text-center">
18                <div class="card-body"><p class="text-white m-0">〜香里ヶ丘の人気店や店舗情報をご紹介〜</p></div>
19            </div>
20    {% endblock %}
21    {% block main %}
22            <!-- Content Row-->
23            <div class="row gx-4 gx-lg-5">
24                {% for object in object_list %}
25                <div class="col-md-4 mb-5">
26                    <div class="card h-100">
27                        <div class="card-body">
28                            <h2 class="card-title">{{ object.shop_name }}</h2>
29                            <img src="{{ object.photo1.url }}" alt="" height=250 width=350>
30                            <p class="card-text mt-3">{{ object.shop_describe }}</p>
31                        </div>
32                        <div class="card-footer"><a class="btn btn-primary btn-sm" href="{% url 'shoplist:detail' object.pk %}">詳しく</a></div>
33                    </div>
34                </div>
35                {% empty %}
36                <p>登録されているお店がありません</p>
37                {% endfor %}
38            </div>
39    {% endblock %}
40    {% block footer %}
41    {% endblock %}
42