Ways to fix text overlap in a pill

Click here to view the code on jsBin

I quickly copied HTML/CSS code to jsBin using a tool called SnappySnippet.

I attempted various solutions, but none of them worked. The best option for me seems to be overflow: ellipses

  1. word-break: break-word;
  2. word-break: break-all;
  3. white-space: pre;
  4. text-overflow: ellipsis;

Here is the CSS code snippet:

#DIV_1 {
    bottom: 0px;
    ...
}

#SPAN_7 {
    box-sizing: border-box;
    color: rgb(51, 51, 51);
    ...
}/*#SPAN_7:before*/

Below is the corresponding HTML structure:

<div id="DIV_1">
  <label id="LABEL_2">
    Invitees
  </label>
  <div id="DIV_3">
    ...
        ... <span id="SPAN_7">A very very long name A very very long name A very very long name &lt;<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="016d6e6f666f606c64416d6e6f6...
    ...
</div>
htmlcssnav-pills

Answer №1

If you're experiencing an issue with text overflowing in a flex box, using ellipsis may be the solution:

#DIV_5 {
    display: flex;
    padding-top: 5px;
}
#DIV_6 {
    order: 2;
    top: -6px;
}
#SPAN_7 {
    line-height: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    flex-grow: 1;
}

https://i.sstatic.net/ofLgX.png

Answer №2

Consider this potential resolution that implements the use of text-overflow: ellipsis. The updated CSS is located at the end of the code snippet, below the Fix comment.

It might be beneficial to streamline the structure of the code for better manageability.

#DIV_1 {
  /* CSS properties */
}

/* Additional CSS selectors and rules */

/* Fix */
#DIV_5 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0;
}

#SPAN_7 {
  line-height: 28px;
}
<div id="DIV_1">
  <label id="LABEL_2">
    Invitees
  </label>
  <div id="DIV_3">
    <div id="DIV_4">
      <div id="DIV_5">
        <div id="DIV_6">
          ×
        </div>
        <span id="SPAN_7">A very very long name A very very long name A very very long name &lt;<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91fdfefff6fff0fcf4d1fdfefff6fff0fcf4bff2fefc">[email protected]</a>&gt;</span>
        <div id="DIV_8">
        </div>
      </div>
      <div id="DIV_5">
        <div id="DIV_6">
          ×
        </div>
        <span id="SPAN_7">Normal length contact&lt;<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3b0bcbda7b2b0a793a0bcbebdb2beb6fdb0bcbe">[email protected]</a>&gt;</span>
        <div id="DIV_8">
        </div>
      </div>
    </div>
  </div>
</div>

Answer №3

One way to achieve this is by using the CSS property text-overflow:ellipsis

body {
  margin: 0;
}

#DIV_1 {
  bottom: 0px;
  box-sizing: border-box;
  color: rgb(51, 51, 51);
  float: left;
  height: 163px;
  left: 0px;
  min-height: 1px;
  position: relative;
  right: 0px;
  text-decoration: none solid rgb(51, 51, 51);
  text-size-adjust: 100%;
  top: 0px;
  width: 665px;
  column-rule-color: rgb(51, 51, 51);
  perspective-origin: 332.5px 81.5px;
  transform-origin: 332.5px 81.5px;
  caret-color: rgb(51, 51, 51);
  border: 0px none rgb(51, 51, 51);
  font: normal normal 400 normal 14px / 20px rajdhanimedium;
  ... (trimmed for brevity)

<div id="DIV_1">
  <label id="LABEL_2">Invitees</label>
  <div id="DIV_3">
    <div id="DIV_4">
      <div id="DIV_5">
        <div id="DIV_6">×</div>
        <span id="SPAN_7">A very very long name A very...&lt;<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b0704050c050a060e2b0704050c">[email protected]</a>&gt;</span>
        <div id="DIV_8"></div>
      </div>
      <div id="DIV_5">
        <div id="DIV_6">×</div>
        <span id="SPAN_7">Normal length contact&lt;<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="56533938223735223e25393b3837353933353920393335">[email protected]</a>&gt;</span>
        <div id="DIV_8"></div>
      </div>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using PHP to send emails with embedded images and background images

I am struggling to send an email with a single image placed on top of another background image. I have managed to make it work using the following code: $message .= "<tr><td background='https://path-to-background/image.jpg'><img s ...

phphtml

What steps are involved in creating a table using Bootstrap framework?

Hey there! I need your expertise on how to create a specific layout using bootstrap: codepen.io/anon/pen/bqJdQJ <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div cl ...

htmlcsstwitter-bootstraptemplates

What is the best way to ensure that <div> elements adapt well within a <nav> element to be responsive?

While creating a dashboard page for a bot, I encountered an issue where the page looked great on desktop but lacked responsiveness on mobile devices. Here's how the page looked on desktop: https://i.sstatic.net/ADsXv.jpg And here's how it appe ...

htmlcssbootstrap-5

The iPhone is having trouble resizing background images in Bootstrap 5 Carousel

While working on my website using the Bootstrap 5 carousel template, I encountered an issue with the carousel images not resizing correctly on my iPhone. The images appear zoomed in to the upper left corner and cut off on smaller devices. I've attemp ...

cssbootstrap-5bootstrap-carousel

The jQuery mouseout event is activated whenever my tooltip is hovered over

Recently, I encountered an issue with a menu that adds a https://i.sstatic.net/A0J2U.png Within the menu, there is jQuery code that functions to add a class on hover and remove it on mouse-out. The code snippet looks something like this... $(document).r ...

javascriptjquerycsstooltip

Issue with Jquery .scroll method not triggering display:none functionality

Styling Using CSS #acc-close-all, #to-top { position: relative; left: 951px; width: 29px; height: 42px; margin-bottom: 2px; display:none; } #acc-close-all a, #to-top a { position: absolute; float: right; display: block ...

javascriptjqueryhtmlcss

Approach to Using Bootstrap 4 with Intl-Tel-Input

I've been attempting to integrate intl-tel-input with bootstrap 4, but I'm facing an issue where the placeholder for the input is not showing up. I've tried various solutions found online, but none of them seem to work. Here's my HTML ...

javascripthtmlcssbootstrap-4intl-tel-input

I am having issues displaying my background image

I'm experiencing an issue where my background image isn't displaying correctly. Here is the CSS code I'm using: body { background-image: url('img/bg.png'); background-repeat: no-repeat; } ...

css

Currently, I am working on a project and encountering an issue with html2canvas

const handleDownloadImage = async () => { try { const canvas = await html2canvas(cardRef.current); console.log(cardRef.current); const imageData = canvas.toDataURL("image/png"); setImageUrl(imageData); } catch ( ...

javascripthtmlreactjs

I am looking to dynamically insert a text field into an HTML form using jQuery or JavaScript when a specific button is clicked

This is my code snippet: <div class="rButtons"> <input type="radio" name="numbers" value="10" />10 <input type="radio" name="numbers" value="20" />20 <input type="radio" name="numbers" value="other" />other </div> ...

phpjavascriptjqueryhtmlajax

The component's width appears to be constrained by the use of display flex

I am currently working on a reactjs application that includes a header and another component. Initially, everything looks fine, but when I apply display: flex to their div, it seems to reduce the width of the header. Here are some images showing the issue: ...

cssreactjsflexbox

Sliding with JavaScript

I'm looking to develop a unique web interface where users can divide a "timeline" into multiple segments. Start|-----------------------------|End ^flag one ^flag two Users should be able to add customizable flags and adjust their position ...

javascriptjqueryhtmljquery-pluginsuser-interface

My footer is now overlaying both my content and navbar

I am facing an issue with my footer. When I test my new footer, it ends up covering the content and navbar. I have been trying to figure out how to solve this problem but haven't had any luck yet. Hopefully, I can find some answers here... $(".toge ...

htmlcss

Adjust the text size of Twitter Bootstrap on mobile screens

I recently started using Twitter Bootstrap. I am currently hiding certain <tr> elements on phone screens by utilizing the class="hidden-phone". However, I am now looking to resize the displayed text to better fit the screen. Is there a way to adjus ...

htmlcsstwitter-bootstrapresponsive-design

There seems to be an issue with the AngularJS ng-click function not functioning properly

I'm attempting to insert a link tag with a filter into an HTML content. The HTML content is bound using ng-bind-html and the link tag includes an ng-click directive. However, I'm facing an issue where the ng-click function is not functioning. He ...

htmlangularjsangularjs-ng-clickng-bind-html

Avoiding the <br> tag in list items with TinyMCE

I am currently using tinyMCE and I needed to enable the "force_br_newlines: true" option. Without this setting, if I press the "Enter" key twice and check the source code, I only see one <br> tag. However, when I set the option to TRUE, it creates a ...

javascripthtmlcsstinymce

The width of my root container does not display at a full 100% in mobile dimensions

After creating a simple React.js project, I set up the folder structure using `npx create-react-app`. Additionally, I added some styling with `* { margin: 0; padding: 0; box-sizing: border-box }`, and specified background colors for the body and #root elem ...

htmlcssreactjs

Employing ajax with dynamically created buttons in PHP

I'm struggling to figure out what to search for in this situation. I've tried piecing together code from others, but it's just not working for me. My ajax function successfully retrieves data from a database through a php page and displays ...

javascriptphpjqueryhtmlajax

Adjust the size of col-lg-3

Is there a way to adjust the size of my col-lg based on different screen resolutions? I'm looking for a solution that can change the size of col-lg depending on the screen resolution. For example: .col-lg-3 { /* styles for screens with 1366x768p ...

csstwitter-bootstrapbootstrap-grid

Unable to establish the origin for an element using JavaScript

Currently, I am developing a simple game in JavaScript that includes a grid and various cells. Here is the current look of the game which functions perfectly. However, I am facing an issue with setting the margin to 0 and wanting to center the canvas inste ...

javascriptcss