Блог

вместо «…» в конце заголовка в мобильном представлении, как мне разорвать строку, чтобы был виден весь заголовок.

я пробовал применять span, но это тоже не работает. пожалуйста, помогите.

 <div class="bg-indigo-700 px-4 py-5 border-b rounded-t sm:px-6">
                  <h3 class="text-lg leading-6 font-medium text-white">
                    Choose the clip you want and download.
                  </h3>
                </div>
                <div class="bg-white shadow overflow-hidden sm:rounded-md">
                  <ul class="divide-y divide-gray-200">

                      {%for links in url_dict:%}
                    <li>
                      <a class="block hover:bg-gray-50">
                        <div class="px-4 py-4 sm:px-6">
                          <div class="flex items-center justify-between">
<!-------------------------------------------TITLE OF THE VIDEO--------------------------->

                            <h3 class="text-sm font-thin text-gray-700 truncate">
                                <a href='{{links}}'>{{url_dict[links][0]}}</a>
                            </h3>

<!----------------------------------------DOWNLOAD BUTTON---------------------------------->
                            <div class="ml-2 flex-shrink-0 flex">
                              <p class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 hover:bg-green-200 text-green-800 hover:text-green-700">
                                Download
                              </p>
                            </div>
                          </div>
                          <div class="mt-2 sm:flex sm:justify-between">
                            <div class="sm:flex">
                              <p class="flex items-center text-sm font-light text-gray-500">
                                length: {{url_dict[links][1]}}
                              </p>
                            </div>
                          </div>
                        </div>
                      </a>
                    </li>
                    {% endfor %}
</ul>
            <button type="button" class="inline-flex items-center m-4 px-4 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
              View more
            </button>
                </div>
 

Вам нужно удалить truncate класс из <h3> элемента в мобильном представлении.

Используется md: для указания того, что класс усечения применим только на средних и больших экранах

 <!-------------------------------------------TITLE OF THE VIDEO--------------------------->
  <h3 class="text-sm font-thin text-gray-700 md:truncate">
      <a href='{{links}}'>{{url_dict[links][0]}}</a>
  </h3>