How to limit text inside a div

Question

I currently have a todo website, and on the home screen I display events in a div. However, when there is a really long title it overflows. Currently I have the x overflow hidden. How would I make it so it would add a ... at the end? I tried text-overflow: ellipsis, but that doesn't seem to help.

Code that displays 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>

css for 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 put my browser into fullscreen the div expands to fit about half the screen, so more text would fit. Is there a functionality to do this if the div is big enough?

Have you tried attaching `text-overflow: ellipsis;` to `.events-content-section div span h4` instead of `.events-content-section` ? — EGC, Nov 25 '19 at 02:00

Gasanov · Answer 1 · 2019-11-25T02:19:34.377

2

Pure css solution would be to remove float:left from h4 title (since it prevents h4 from collapsing to the borders of parent) and apply text-overflow and overflow to h4 title

.events-content-section h4 {
  text-overflow: ellipsis;
  overflow: hidden;
}

https://codepen.io/Gasanov/pen/YzzbxeY

Btw you have a weird html layout - why do you need button inside a button? That's not valid html. I would definitely reconsider layout using bootstrap grid tutorial, remove those float, use utility classes for text alignment.

edited Nov 25 '19 at 02:19

answered Nov 25 '19 at 02:05

Gasanov

2,839
1
9
21

The ellipsis works perfectly, but the div still stretches longer than the other divs. I only added the css code and changed floats to bootstrap classes. I have no idea why this is happening. Image: https://imgur.com/a/C6p15y2 – Silent Beast Nov 27 '19 at 03:08
Change the layout - it's probably because of floats. Check out bootstrap guide on their grid system and adapt your HTML using it. – Gasanov Nov 27 '19 at 03:22

score 1 · Answer 2 · answered Nov 25 '19 at 01:56

1

You can truncate a string with django to show only a exact number of characters in text:

From Django doc

answered Nov 25 '19 at 01:56

bergbp

31
1
4

When I put my browser into fullscreen the div expands to fit about half the screen, so more text would fit. Is there a functionality to take out truncate out if the div is big enough? I'm fairly new to django so I apologize if its a really simple answer. – Silent Beast Nov 25 '19 at 02:05
you can do this with css, with something like that: https://www.w3schools.com/cssref/css3_pr_word-wrap.asp i dont know with django you can do this, but with css is more efficiently – bergbp Nov 25 '19 at 02:28

score 1 · Answer 3 · answered Nov 25 '19 at 09:53

p {
  width: 200px;
  border: 1px solid;
  padding: 2px 5px;

  /* BOTH of the following are required for text-overflow */
  white-space: nowrap;
  overflow: hidden;
}

.overflow-visible {
  white-space: initial;
}

<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>
                            <p class="overflow-visible">aaaa bbbbbbbbbbbbbb ccccccccccccccccccccccc fgggggggggggg</p>
                            <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>

Add the CSS and add class to the P tag

How to limit text inside a div

3 Answers3