CODEWITHSUNDEEP
javascriptcssreactjssass
John Glabb
John Glabb

Reputation: 1621

how to get/set component size dynamically

I have a DIV container that has a paragraph and another inner DIV displayed in line. Inner DIV is unknown but it's always the same and not gonna change. I can sent min-width if needed. Now based on outer DIV size I need to either cut (with three dots) or show full paragraph string. But I have to set paragraph width in css to show that three dots when outer div size is too small.

<div className="divOuter">
  <p>very long string</p>
  <div className="divInner">some div stuff</div>
</div>

.p {
  position: relative;
  float: left;
  text-overflow: ellipsis;
  overflow: hidden; 
  width: ?????;               // what do I set here?????
  white-space: nowrap;
}

.divInner {
  display: flex;
  float: right;
  align-items: center;
}


|--------------------------------------|
|very long string        some div stuff|
|--------------------------------------|

need to get this when outer DIV resized:
|------------------------------|
|very long st... some div stuff|
|------------------------------|

|--------------------|
|ve... some div stuff|
|--------------------|

Upvotes: 0

Views: 120

Answers (1)

Nisanth Reddy
Nisanth Reddy

Reputation: 6395

This is what you are looking for.

You don't need to give any width to the long string p element.

There is a property of flexbox called flex. When you set this to 1, it will elongate that element to take up the remaining horizontal space in the parent.

After that, you just have to give text-overflow: ellipsis; overflow: hidden; to make the ... appear.

Run the below snippet to see it working.

.divOuter {
  display: flex;
  width: 100%;
}

.longString {
  flex: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.divInner {}
<div class="divOuter">
  <p class="longString">very long string very long string very long string very long string very long string</p>
  <p class="divInner">some div stuff</p>
</div>

Upvotes: 1

Related Questions