htmlcssdjangorich-text-editordjango-ckeditor

Text is going out of the container and it's appearing in just one line and goes out of the page


I am trying to add some texts to my project-details section using a rich text uploading field in Django admin. There it should be in a paragraph as I have added them in my Django admin project description, but it's showing a line and also it goes out of the container, but it gives space on the left side of the container but not in the right side of container and it goes out of the page.

Here is my project-details.html page:

{% extends "base.html" %}
{% load static %}
{% static "images" as baseUrl %}

{% block title %}{{projectdetails.title}}{% endblock %}

<!--header block -->
{% block header %}

<!-- Slider Start -->

<section class="section about">
    <div class="container">{{projectdetails.desc|safe}}</div>
        

</section>


<!--slider ends -->

<!-- footer Start -->

{% block footer %}

<!--Essential Scripts -->

{% block Scripts %}


{% endblock %}
{% endblock %}
{% endblock %}

Here is my project.html page:

{% extends "base.html" %}
{% load static %}
{% static "images" as baseUrl %}

{% block title %}Project{% endblock %}

<!--header block -->

{% block header %}
<!-- slider starts -->
</div>
<div class="typing">
    <p class="type4"></p>

</div>

<!-- section portfolio start -->
<section class="section box">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="heading text-center">
                    <p>We have the best experts to elevate your business to the next level, try is and you will see! We have the best experts to elevate your </p>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row ">
            {% for projects in projectdetails %}
            <div class="col-lg-4 col-md-6">
                <div class="portflio-item position-relative mb-4">
                    <a href="{% url 'project-details' id=projects.id %}" >
                        <img src="{{projects.img.url}}" alt="" class="img-fluid w-100">
                        <div class="overlay-item"><i class="ti-link"></i></div> 
                        
                        <div class="portfolio-item-content">
                            <h3 class="mb-0 text-white">{{projects.title}}</h3>
                            <p class="text-white-50">{{projects.category}}</p>
                        </div>
                    </a>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!--slider ends -->

<!-- footer Start -->
{% block footer %}

<!-- section portfolio END -->

{% endblock %}
{% endblock %}

Here is my models.py section:

class projectdetail(models.Model):
    title = models.CharField(max_length=100)
    desc = RichTextUploadingField(blank=True, null=True)
    category = models.ForeignKey(category, on_delete=models.CASCADE)
    client =models.CharField(max_length=100)
    startdate = models.DateTimeField(auto_now=False,auto_now_add=False)
    enddate = models.DateTimeField(auto_now=False,auto_now_add=False)
    img = models.ImageField(upload_to='pics')
    url = models.URLField(
        validators=[URLValidator(message="Enter a valid URL.")]
    )

Now I'm facing this problem as shown in this picture.

project-details.html page picture

I want to show these lines like a paragraph in a container correctly.


Solution

  • Use word-wrap see example here