Truncate text in scalable content

Question

I divided page into 2 parts which I have done it using 'w-50' bootstrap(4) css class.

All page items(components) are already created and designed and they work as expected except the text(Lorem impsum dolor sit amet) which should be truncated based on available space.

I have listed the type of components marked orange in uploaded image. select -> span -> img(star in this case) -> div(fixed size)

When all the other elements select, img(star), div(fixed) takes their respective widths, we have to truncate our span(lorem ipsum).

Could you please provide any solution or suggest a topic which should be investigated to archive the result expected?

JSFiddle: https://jsfiddle.net/AEMLoviji/umf6nzL3/6/

Hi There ...What exactly do you mean by trucated. And could you also share your code on jsfiddle. Would like to have a look there :) — Imran Rafiq Rather
Hi @ImranRafiqRather. Truncate text it means text truncation using CSS's text-overflow property and etc. If you look at the uploaded image(i.e. exactly lorem ipsum text) then you visually understand what text truncation means. Sharing current code on jsfiddle will take some time I suppose. So I will share it when I'll finish with that. — AEMLoviji
No problem. I understood where you are coming from. Once you have your code on codepen or jsfiddle. Feel free to drop me a message, that's where I can actually see what is going on. — Imran Rafiq Rather
@ImranRafiqRather I have created JSFiddle where similar page with similar components are included. jsfiddle.net/AEMLoviji/umf6nzL3/6 — AEMLoviji

Imran Rafiq Rather Imran Rafiq Rather · Accepted Answer · 2020-12-20T19:20:27

UPDATE: Created my Custom Scenario's to resolve the Problem. Apart from adding some additional CSS, have used a bit of Javascript as well to meet the required conditions.

Working Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Account Dashboard</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

    <style>
      select {
        width: 100px;
      }
      .fixed-right-aligned {
        flex-basis: 330px;
      }

      .left-actions {
        background-color: #fa4567;
      }

      .right-actions {
        background-color: #13a352;
      }

      .left-content {
        background-color: #4667fa;
      }

      .right-content {
        background-color: #67fa46;
      }

      /* --- Added CSS --- */
      .wrapper-aem {
        height: 20px;
        position: relative;
        overflow: hidden;
        padding-right: 5px;
      }

      .three-dots {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
      }
    </style>
  </head>
  <body>
    <div class="h-100 w-100 p-0">
      <div class="d-flex w-100">
        <div class="d-flex w-100">
          <div class="w-50 left-actions">
            <div class="d-flex">
              <div
                class="d-flex align-items-center left-actions-content flex-grow-1"
              >
                <select>
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                </select>

                <div class="d-flex align-items-center flex-grow-1">
                  <div class="wrapper-aem flex-grow-1">
                    <span class="lorem-content">
                      Lorem ipsum There are no accidents Lorem ipsum dolor sit,
                      Lorem ipsum dolor sit amet.
                    </span>
                    <span class="three-dots">...</span>
                  </div>
                  <div class="block d-flex align-items-center">
                    <button class="btn btn-icon info-icon" type="button">
                      <svg
                        height="16pt"
                        viewBox="0 -10 511.98685 511"
                        width="16pt"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m510.652344 185.902344c-3.351563-10.367188-12.546875-17.730469-23.425782-18.710938l-147.773437-13.417968-58.433594-136.769532c-4.308593-10.023437-14.121093-16.511718-25.023437-16.511718s-20.714844 6.488281-25.023438 16.535156l-58.433594 136.746094-147.796874 13.417968c-10.859376 1.003906-20.03125 8.34375-23.402344 18.710938-3.371094 10.367187-.257813 21.738281 7.957031 28.90625l111.699219 97.960937-32.9375 145.089844c-2.410156 10.667969 1.730468 21.695313 10.582031 28.09375 4.757813 3.4375 10.324219 5.1875 15.9375 5.1875 4.839844 0 9.640625-1.304687 13.949219-3.882813l127.46875-76.183593 127.421875 76.183593c9.324219 5.609376 21.078125 5.097657 29.910156-1.304687 8.855469-6.417969 12.992187-17.449219 10.582031-28.09375l-32.9375-145.089844 111.699219-97.941406c8.214844-7.1875 11.351563-18.539063 7.980469-28.925781zm0 0"
                          fill="#ffc107"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </div>

              <div
                class="d-flex p-1 align-items-center justify-content-end fixed-right-aligned"
              >
                Fixed sized toolbar
              </div>
            </div>
          </div>
          <div class="w-50 right-actions">
            <div class="d-flex">
              <div class="d-flex align-items-center">
                <p>Any content goes here</p>
              </div>

              <div
                class="d-flex p-1 align-items-center justify-content-end fixed-right-aligned"
              >
                <span>Fixed sized toolbar</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="d-flex">
        <div class="w-50 left-content">
          <span> Left content </span>
        </div>
        <div class="w-50 right-content">
          <span> Right content </span>
        </div>
      </div>
    </div>

    <script>
      document.addEventListener("DOMContentLoaded", (e) => {
        const loremWrapper = document.querySelector(".wrapper-aem");

        // I have used the resize handler for testing purposes, It may or may not be needed (decide as per your requirement)
        window.addEventListener("resize", () => {
          handleContentBehaviour();
        });

        const handleContentBehaviour = () => {
          if (window.innerWidth > 1366) {
            document.querySelector(".three-dots").style.display =
              "inline-block";
          } else {
            document.querySelector(".three-dots").style.display = "none";
          }
        };
        handleContentBehaviour();
      });
    </script>
  </body>
</html>

Truncate text in scalable content

1 Answers