Truncate text when there is not enough space on a row with 2 flex items (left/right positioned)

Question

Code inserted into post but might be easier to view externally using CodePen due to screen width.

Codepen: https://codepen.io/moy/pen/ZExBarq

I have a container that displays the caption of the active carousel slide, as well as the pagination 'count'. These two elements are positioned left/right (or top/bottom, as the parent as it appears) as the div is rotated.

If the viewport is short and the caption longer, I just want to ensure the caption doesn't wrap and truncates with "..." and a bit of padding to be neat and tidy.

I've tried:

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Set on .swiper-caption but that doesn't give me the desired effect. Can someone point me in the right direction, what am I missing?

/* FADE IN WHEN CONTENT LOADED */

window.addEventListener("DOMContentLoaded", function () {
  document.body.className = "visible";
});


/* CAROUSEL */

var caption = document.querySelector(".swiper-caption");

new Swiper(".swiper", {
  // Disable preloading of all images
  preloadImages: false,
  // Enable lazy loading
  lazy: true,
  effect: "fade",
  fadeEffect: {
    crossFade: true
  },
  loop: true,
  autoplay: {
    delay: 1200,
    disableOnInteraction: false,
    pauseOnMouseEnter: true
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  },
  pagination: {
    el: ".swiper-pagination",
    type: "fraction"
  },
  on: {
    init: function () {
      updateCaptionText(this);
    },
    activeIndexChange: function () {
      updateCaptionText(this);
    }
  }
});

function updateCaptionText(slider) {
  caption.textContent = slider.slides[slider.activeIndex].dataset.caption;
}





/* CUSTOM CURSOR */

var cursor = document.querySelector(".cursor");
var cursorTrail = document.querySelector(".cursor-trail");
var a = document.querySelectorAll("a");
var timeout;

window.addEventListener(
  "mousemove",
  function (e) {
    var x = e.clientX;
    var y = e.clientY;
    if (!timeout) {
      timeout = setTimeout(function () {
        timeout = null;
        cursor.style.transform = `translate(${x - 2}px, ${y - 2}px)`;
        timeout = null;
        cursorTrail.style.transform = `translate(${x - 16}px, ${y - 16}px)`;
      }, 16);
    }
  },
  false
);

/* Add/Remove Classes */

document.addEventListener("mousedown", function () {
  cursor.classList.add("cursor--click");
});

document.addEventListener("mouseup", function () {
  cursor.classList.remove("cursor--click");
});

a.forEach((item) => {
  item.addEventListener("mouseover", () => {
    cursorTrail.classList.add("cursor-trail--hover");
  });
  item.addEventListener("mouseleave", () => {
    cursorTrail.classList.remove("cursor-trail--hover");
  });
});

a.forEach((item) => {
  const interaction = item.dataset.interaction;

  item.addEventListener("mouseover", () => {
    cursor.classList.add(interaction);
  });
  item.addEventListener("mouseleave", () => {
    cursor.classList.remove(interaction);
  });
});

/* #GLOBAL */

body.hidden {
  opacity: 0;
}

body.visible {
  opacity: 1;
  transition: opacity 0.48s ease-out;
}

html {
    background: white;
    font-size: 62.5%;
    height: 100vh;
    height: var(--app-height);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}

/**
 * Base `body` styling.
 */

body {
    background-color: transparent;
    font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
  font-size: 16px;
    height: 100vh;
    height: var(--app-height);
    margin: 0;
    padding: 0;
    text-rendering: optimizeLegibility;
}

h1,
p {
  margin: 0 0 24px;
  padding: 0;
}

/* #HEAD (left column) */

.page-head {
  border-bottom: 2px solid black;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 24px;
  position: fixed;
  bottom: -64px;
  left: 0;
  transform: rotate(-90deg);
  transform-origin: top left;
  width: 100vh;
}

.site-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  order: 1;
  stroke: black;
  transform: rotate(90deg);
  width: 32px;

  svg {
    overflow: visible;
  }
}

.contrast {
  display: flex;
  align-items: center;
  flex: 1 1 0%;
  margin-bottom: 0;
  justify-content: flex-start;
}

/* #GRID */

.grid {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.grid__item {
  box-sizing: border-box;
  padding: 24px 24px 0;
  margin-left: 64px;
}

.gallery {
  box-sizing: border-box;
  flex: 1;
  overflow: hidden;
  position: relative;
  padding: 0 24px 24px;
  text-align: center;
}

.gallery img {
  border: 2px solid black;
  box-sizing: border-box;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: top center;
  width: 100%;
  max-width: 100%;
}

/**
 * Side-by-side view for wider devices.
 */

.grid {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: var(--app-height);
}

/**
 * Grid Cells.
 */

.grid__item {
    box-sizing: border-box;
    padding: 48px 48px 0;
    margin-left: 48px;
    
    @media only screen and (min-width: 1000px) {
        margin-left: 0;
    }
}

.gallery {
    box-sizing: border-box;
    flex: 1;
    overflow: hidden;
    position: relative;
    padding: 0 24px 24px;
    text-align: center;
}


.gallery img {
    border: 2px solid black;
    box-sizing: border-box;
    height: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: top center;
    width: 100%;
    max-width: 100%;
    
    @media only screen and (min-width: 1000px) {
        width: auto;
    }
}

/**
 * Side-by-side view for wider devices.
 */
    
@media only screen and (min-width: 1000px) {

    .grid {
      background-color: black;
      flex-direction: row;
      column-gap: 2px;
      height: 100vh;
      margin: 0 48px;
    }
    
    .grid__item {
      background-color: white;
      transition: width .12s;
      width: 33.333333%;
      height: 100vh;
    }
    
    .gallery {
        padding-top: 24px;
    }
    
    .gallery img {
        height: 100%; // Was Auto to keep aspect-ratio
        max-height: 100%;
        //object-fit: initial;
        width: auto;
        max-width: 100%;
    }
}

@media only screen and (min-width: 1000px) {
    
    .grid__item {
      width: 50%;
    }
}




@media screen and (max-height: 600px) {

    .grid {
        height: auto;
    }
    
    .grid__item {
        height: auto;
    } 
          
}

/* #FOOTER (right column) */

.page-foot {
  margin-left: 64px;
  padding: 0 24px;
}

.swiper-pagination {
  display: none;
}

@media only screen and (min-width: 1000px) {
  
  .page-foot {
    border-bottom: 2px solid black;
    box-sizing: border-box;
    display: flex;
    height: 64px;
    padding: 0 24px;
    position: fixed;
    bottom: -64px;
    left: 0;
    transform: rotate(-90deg);
    transform-origin: top left;
    width: 100vh;
    left: auto;
    right: 0;
    transform: rotate(90deg);
    transform-origin: top right;

    p {
      display: flex;
      align-items: center;
      margin-bottom: 0;
    }
  }

  .swiper-caption {
    flex: 1 1 0%;
  }
}





/* CURSOR */

* {
  //cursor: none !important;
}

body:hover {
  .cursor-trail {
    border-color: black;
  }

  .cursor span {
    background-color: black;
  }
}

.cursor {
  position: fixed;
  z-index: 1000;
}

.cursor span {
  background-color: transparent;
  border-radius: 100%;
  display: block;
  height: 4px;
  margin: 0;
  pointer-events: none;
  transition: background-color 0.12s ease-out, height 0.12s, opacity 0.12s,
    width 0.12s;
  position: fixed;
  width: 4px;
}

.cursor--click span {
  height: 0;
  margin: 2px 0 0 2px;
  width: 0;
}

.cursor-trail {
  border: 2px solid transparent;
  border-radius: 100%;
  box-sizing: border-box;
  height: 32px;
  margin: 0;
  pointer-events: none;
  position: fixed;
  transform-origin: center center;
  transition: border-color 0.12s ease-out, height 0.12s ease-out, margin 0.12s ease-out, opacity 0.12s ease-out, transform 0.24s cubic-bezier(0, 0.5, 1, 1), width 0.12s ease-out;
  width: 32px;
  z-index: 1000;
}

.cursor-trail--hover {
  height: 4px;
  margin: 16px 0 0 16px;
  opacity: 0;
  width: 4px;
}

/* Prev */

.cursor-prev span,
.cursor-next span {
  border-radius: 0;
  height: 2px;
  transition: height 0.12s, opacity 0.12s, transform 0.12s, width 0.12s;
  transform-origin: center center;
  left: -16px;
  width: 32px;

  &:before,
  &:after {
    background: black;
    content: "";
    display: block;
    height: 2px;
    opacity: 0;
    width: 16px;
    position: absolute;
    transform-origin: center left;
  }

  &:before {
    animation: cursor-prev 0.12s ease-in-out 0.32s forwards;
  }
  &:after {
    animation: cursor-next 0.12s ease-in-out 0.32s forwards;
  }
}

.cursor-next span {
  transform: rotate(-180deg);
}

@keyframes cursor-prev {
  0% {
    transform: rotate(0);
  }

  100% {
    opacity: 1;
    transform: rotate(-45deg);
  }
}

@keyframes cursor-next {
  0% {
    transform: rotate(0);
  }

  100% {
    opacity: 1;
    transform: rotate(45deg);
  }
}

/* SWIPER */

.swiper {
    height: 100%; // Fits image in viewport
    position: relative;
    //overflow: hidden; // Removed which seems to help border getting cut off
    touch-action: pan-y;
    z-index: 1; // Fix of Webkit flickering
    -webkit-user-select: none; // Fixes issue in Safari when clicking carousel quickly, page is highlighted black.
}

.swiper-wrapper {
    box-sizing: border-box;
    display: flex;
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 1;
}

.swiper-slide {
    backface-visibility: hidden;
    flex-shrink: 0;
    height: 100%;
    max-height: 100%; // Added myself
    pointer-events: none;
    position: relative;
    transform: translateZ(0);
    transition: opacity 12ms ease-out !important;
    width: 100%;
}

.swiper-slide-active {
  pointer-events: auto;
}

.swiper-button-prev,
.swiper-button-next {
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: absolute;
    top: 0;
    width: 50%;
    z-index: 10;
    
    &:focus {
        outline: 0;
    }
}

.swiper-button-prev {
  left: 0;
}

.swiper-button-next {
  right: 0;
}

.swiper-pagination-current {
    margin-right: 4px;
}

.swiper-pagination-total {
    margin-left: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.2.2/swiper-bundle.min.js"></script>
<script>
  document.body.className = 'hidden';
</script>

<div class="cursor"><span></span></div>
<div class="cursor-trail"></div>

<div class="page-head" role="banner">
  <div class="site-logo">
    M
  </div>
  <p class="contrast"><a href="#" class="contrast__link"><span class="contrast__switch"></span><span class="contrast__label">Contrast</span></a></p>
</div>

<div class="grid" role="main">

  <div class="grid__item">

    <h1 class="brand-name">Name of Page</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

  </div>

  <div class="grid__item gallery">

    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" data-caption="1 Caption that is really, really, really, really long">
          <img src="https://www.fillmurray.com/700/1000" />
        </div>
        <div class="swiper-slide" data-caption="2 Caption that is really, really, really, really long">
          <img src="https://www.fillmurray.com/700/1100" />
        </div>
        <div class="swiper-slide" data-caption="3 Caption that is really, really, really, really long">
          <img src="https://www.fillmurray.com/700/1200" />
        </div>
      </div>
      <a class="swiper-button-prev" data-interaction="cursor-prev"></a>
      <a class="swiper-button-next" data-interaction="cursor-next"></a>
    </div>

  </div>

  <div class="page-foot" role="contentinfo">
    <p class="swiper-caption">Caption that is really, really, really, really long...</p>
    <p class="swiper-pagination"></p>
  </div>

</div>

Jayanika Chandrapriya · Answer 1 · 2022-07-14T22:09:20.973

You can use CSS text-overflow property as 'ellipsis' and the width of the caption has to be 100%. Please find my amend at the very top of the CSS part of the code.

p.swiper-caption {
 padding: 16px 0px 0px 0px;
 width: 100%;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

Horizontal preview

Vertical preview

/* FADE IN WHEN CONTENT LOADED */

window.addEventListener("DOMContentLoaded", function () {
  document.body.className = "visible";
});


/* CAROUSEL */

var caption = document.querySelector(".swiper-caption");

new Swiper(".swiper", {
  // Disable preloading of all images
  preloadImages: false,
  // Enable lazy loading
  lazy: true,
  effect: "fade",
  fadeEffect: {
    crossFade: true
  },
  loop: true,
  autoplay: {
    delay: 1200,
    disableOnInteraction: false,
    pauseOnMouseEnter: true
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  },
  pagination: {
    el: ".swiper-pagination",
    type: "fraction"
  },
  on: {
    init: function () {
      updateCaptionText(this);
    },
    activeIndexChange: function () {
      updateCaptionText(this);
    }
  }
});

function updateCaptionText(slider) {
  caption.textContent = slider.slides[slider.activeIndex].dataset.caption;
}





/* CUSTOM CURSOR */

var cursor = document.querySelector(".cursor");
var cursorTrail = document.querySelector(".cursor-trail");
var a = document.querySelectorAll("a");
var timeout;

window.addEventListener(
  "mousemove",
  function (e) {
    var x = e.clientX;
    var y = e.clientY;
    if (!timeout) {
      timeout = setTimeout(function () {
        timeout = null;
        cursor.style.transform = `translate(${x - 2}px, ${y - 2}px)`;
        timeout = null;
        cursorTrail.style.transform = `translate(${x - 16}px, ${y - 16}px)`;
      }, 16);
    }
  },
  false
);

/* Add/Remove Classes */

document.addEventListener("mousedown", function () {
  cursor.classList.add("cursor--click");
});

document.addEventListener("mouseup", function () {
  cursor.classList.remove("cursor--click");
});

a.forEach((item) => {
  item.addEventListener("mouseover", () => {
    cursorTrail.classList.add("cursor-trail--hover");
  });
  item.addEventListener("mouseleave", () => {
    cursorTrail.classList.remove("cursor-trail--hover");
  });
});

a.forEach((item) => {
  const interaction = item.dataset.interaction;

  item.addEventListener("mouseover", () => {
    cursor.classList.add(interaction);
  });
  item.addEventListener("mouseleave", () => {
    cursor.classList.remove(interaction);
  });
});

/* #GLOBAL */

p.swiper-caption {
  padding: 16px 0px 0px 0px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.hidden {
  opacity: 0;
}

body.visible {
  opacity: 1;
  transition: opacity 0.48s ease-out;
}

html {
    background: white;
    font-size: 62.5%;
    height: 100vh;
    height: var(--app-height);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}

/**
 * Base `body` styling.
 */

body {
    background-color: transparent;
    font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
  font-size: 16px;
    height: 100vh;
    height: var(--app-height);
    margin: 0;
    padding: 0;
    text-rendering: optimizeLegibility;
}

h1,
p {
  margin: 0 0 24px;
  padding: 0;
}

/* #HEAD (left column) */

.page-head {
  border-bottom: 2px solid black;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 24px;
  position: fixed;
  bottom: -64px;
  left: 0;
  transform: rotate(-90deg);
  transform-origin: top left;
  width: 100vh;
}

.site-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  order: 1;
  stroke: black;
  transform: rotate(90deg);
  width: 32px;

  svg {
    overflow: visible;
  }
}

.contrast {
  display: flex;
  align-items: center;
  flex: 1 1 0%;
  margin-bottom: 0;
  justify-content: flex-start;
}

/* #GRID */

.grid {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.grid__item {
  box-sizing: border-box;
  padding: 24px 24px 0;
  margin-left: 64px;
}

.gallery {
  box-sizing: border-box;
  flex: 1;
  overflow: hidden;
  position: relative;
  padding: 0 24px 24px;
  text-align: center;
}

.gallery img {
  border: 2px solid black;
  box-sizing: border-box;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: top center;
  width: 100%;
  max-width: 100%;
}

/**
 * Side-by-side view for wider devices.
 */

.grid {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: var(--app-height);
}

/**
 * Grid Cells.
 */

.grid__item {
    box-sizing: border-box;
    padding: 48px 48px 0;
    margin-left: 48px;
    
    @media only screen and (min-width: 1000px) {
        margin-left: 0;
    }
}

.gallery {
    box-sizing: border-box;
    flex: 1;
    overflow: hidden;
    position: relative;
    padding: 0 24px 24px;
    text-align: center;
}


.gallery img {
    border: 2px solid black;
    box-sizing: border-box;
    height: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: top center;
    width: 100%;
    max-width: 100%;
    
    @media only screen and (min-width: 1000px) {
        width: auto;
    }
}

/**
 * Side-by-side view for wider devices.
 */
    
@media only screen and (min-width: 1000px) {

    .grid {
      background-color: black;
      flex-direction: row;
      column-gap: 2px;
      height: 100vh;
      margin: 0 48px;
    }
    
    .grid__item {
      background-color: white;
      transition: width .12s;
      width: 33.333333%;
      height: 100vh;
    }
    
    .gallery {
        padding-top: 24px;
    }
    
    .gallery img {
        height: 100%; // Was Auto to keep aspect-ratio
        max-height: 100%;
        //object-fit: initial;
        width: auto;
        max-width: 100%;
    }
}

@media only screen and (min-width: 1000px) {
    
    .grid__item {
      width: 50%;
    }
}




@media screen and (max-height: 600px) {

    .grid {
        height: auto;
    }
    
    .grid__item {
        height: auto;
    } 
          
}

/* #FOOTER (right column) */

.page-foot {
  margin-left: 64px;
  padding: 0 24px;
}

.swiper-pagination {
  display: none;
}

@media only screen and (min-width: 1000px) {
  
  .page-foot {
    border-bottom: 2px solid black;
    box-sizing: border-box;
    display: flex;
    height: 64px;
    padding: 0 24px;
    position: fixed;
    bottom: -64px;
    left: 0;
    transform: rotate(-90deg);
    transform-origin: top left;
    width: 100vh;
    left: auto;
    right: 0;
    transform: rotate(90deg);
    transform-origin: top right;

    p {
      display: flex;
      align-items: center;
      margin-bottom: 0;
    }
  }

  .swiper-caption {
    flex: 1 1 0%;
  }
}





/* CURSOR */

* {
  //cursor: none !important;
}

body:hover {
  .cursor-trail {
    border-color: black;
  }

  .cursor span {
    background-color: black;
  }
}

.cursor {
  position: fixed;
  z-index: 1000;
}

.cursor span {
  background-color: transparent;
  border-radius: 100%;
  display: block;
  height: 4px;
  margin: 0;
  pointer-events: none;
  transition: background-color 0.12s ease-out, height 0.12s, opacity 0.12s,
    width 0.12s;
  position: fixed;
  width: 4px;
}

.cursor--click span {
  height: 0;
  margin: 2px 0 0 2px;
  width: 0;
}

.cursor-trail {
  border: 2px solid transparent;
  border-radius: 100%;
  box-sizing: border-box;
  height: 32px;
  margin: 0;
  pointer-events: none;
  position: fixed;
  transform-origin: center center;
  transition: border-color 0.12s ease-out, height 0.12s ease-out, margin 0.12s ease-out, opacity 0.12s ease-out, transform 0.24s cubic-bezier(0, 0.5, 1, 1), width 0.12s ease-out;
  width: 32px;
  z-index: 1000;
}

.cursor-trail--hover {
  height: 4px;
  margin: 16px 0 0 16px;
  opacity: 0;
  width: 4px;
}

/* Prev */

.cursor-prev span,
.cursor-next span {
  border-radius: 0;
  height: 2px;
  transition: height 0.12s, opacity 0.12s, transform 0.12s, width 0.12s;
  transform-origin: center center;
  left: -16px;
  width: 32px;

  &:before,
  &:after {
    background: black;
    content: "";
    display: block;
    height: 2px;
    opacity: 0;
    width: 16px;
    position: absolute;
    transform-origin: center left;
  }

  &:before {
    animation: cursor-prev 0.12s ease-in-out 0.32s forwards;
  }
  &:after {
    animation: cursor-next 0.12s ease-in-out 0.32s forwards;
  }
}

.cursor-next span {
  transform: rotate(-180deg);
}

@keyframes cursor-prev {
  0% {
    transform: rotate(0);
  }

  100% {
    opacity: 1;
    transform: rotate(-45deg);
  }
}

@keyframes cursor-next {
  0% {
    transform: rotate(0);
  }

  100% {
    opacity: 1;
    transform: rotate(45deg);
  }
}

/* SWIPER */

.swiper {
    height: 100%; // Fits image in viewport
    position: relative;
    //overflow: hidden; // Removed which seems to help border getting cut off
    touch-action: pan-y;
    z-index: 1; // Fix of Webkit flickering
    -webkit-user-select: none; // Fixes issue in Safari when clicking carousel quickly, page is highlighted black.
}

.swiper-wrapper {
    box-sizing: border-box;
    display: flex;
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 1;
}

.swiper-slide {
    backface-visibility: hidden;
    flex-shrink: 0;
    height: 100%;
    max-height: 100%; // Added myself
    pointer-events: none;
    position: relative;
    transform: translateZ(0);
    transition: opacity 12ms ease-out !important;
    width: 100%;
}

.swiper-slide-active {
  pointer-events: auto;
}

.swiper-button-prev,
.swiper-button-next {
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: absolute;
    top: 0;
    width: 50%;
    z-index: 10;
    
    &:focus {
        outline: 0;
    }
}

.swiper-button-prev {
  left: 0;
}

.swiper-button-next {
  right: 0;
}

.swiper-pagination-current {
    margin-right: 4px;
}

.swiper-pagination-total {
    margin-left: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.2.2/swiper-bundle.min.js"></script>
<script>
  document.body.className = 'hidden';
</script>

<div class="cursor"><span></span></div>
<div class="cursor-trail"></div>

<div class="page-head" role="banner">
  <div class="site-logo">
    M
  </div>
  <p class="contrast"><a href="#" class="contrast__link"><span class="contrast__switch"></span><span class="contrast__label">Contrast</span></a></p>
</div>

<div class="grid" role="main">

  <div class="grid__item">

    <h1 class="brand-name">Name of Page</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

  </div>

  <div class="grid__item gallery">

    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" data-caption="1 Caption that is really, really, really, really long">
          <img src="https://www.fillmurray.com/700/1000" />
        </div>
        <div class="swiper-slide" data-caption="2 Caption that is really, really, really, really long">
          <img src="https://www.fillmurray.com/700/1100" />
        </div>
        <div class="swiper-slide" data-caption="3 Caption that is really, really, really, really long">
          <img src="https://www.fillmurray.com/700/1200" />
        </div>
      </div>
      <a class="swiper-button-prev" data-interaction="cursor-prev"></a>
      <a class="swiper-button-next" data-interaction="cursor-next"></a>
    </div>

  </div>

  <div class="page-foot" role="contentinfo">
    <p class="swiper-caption">Caption that is really, really, really, really long...</p>
    <p class="swiper-pagination"></p>
  </div>

</div>

You follow more on CSS ellipsis here : https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

Thanks, seems like the `width: 100%` is what I was missing. I have an element aligned right so not sure that would work in the currently markup. So I might need to add an inner `span` and apply it to that. — user1406440, Jul 15 '22 at 07:07
Parent needed `overflow: hidden;` on it as well. So put that on `swiper-caption` and then within that a `span` which has `overflow: hidden; text-overflow: ellipsis; white-space: nowrap;` seems to do the job! — user1406440, Jul 15 '22 at 07:22

Truncate text when there is not enough space on a row with 2 flex items (left/right positioned)

1 Answers1