Currently, on my to-do list website, I am facing an issue with displaying long event titles in a div on the home screen. The text overflows, and even though I have set the x-overflow to hidden, it's not providing the desired result. I have tried using text-overflow: ellipsis, but it doesn't seem to work. How can I make it show an ellipsis at the end of the long title?
https://i.sstatic.net/4uZ0L.png
Below is the code responsible for displaying the events:
<div class="col-md-6 inline mb-4">
<h3 class="ml-1">Events:</h3>
<div class="events-content-section ml-2">
{% for event in events %}
<div class="mb-2" style="display: flex; align-items: center;">
<button type="button" class="view-event btn btn-light" style="width: 100%;" data-id="{% url 'view-event' event.pk %}">
<span>
<h4 style="float: left;">{{ event.title }}</h4>
<button type="button" class="update-event btn btn-sm btn-info ml-1" data-id="{% url 'update-event' event.pk %}" style="float: right;">
<span class="fas fa-edit"></span>
</button>
<button type="button" class="delete-event btn btn-sm btn-danger mr-2 ml-2" data-id="{% url 'delete-event' event.pk %}" style="float: right;">
<span class="fa fa-trash"></span>
</button>
</span>
</button>
</div>
{% endfor %}
</div>
</div>
Below is the CSS code for the event div:
.events-content-section {
background: #f5f5f5;
padding: 10px 20px;
border: 3px solid #dddddd;
border-radius: 3px;
overflow-y: auto;
overflow-x: hidden;
text-overflow: ellipsis;
height: 400px;
}
EDIT: When I fullscreen the browser, the div expands to about half the screen, allowing more text to fit. Is there a way to make this adjustment automatically if the div is big enough?