CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
AEMLoviji
AEMLoviji

Reputation: 3257

Truncate text in scalable content

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/

enter image description here

Upvotes: 0

Views: 520

Answers (1)

Imran Rafiq Rather
Imran Rafiq Rather

Reputation: 8118

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>

Upvotes: 1

Related Questions