CODEWITHSUNDEEP
cssreactjs
saritha
saritha

Reputation: 659

How to set the span element at the bottom of span element next to it and ellipsis using css and react?

i want to set the Text in NumberAndText div to be at the level of the Number span and not be centered. i want to achieve like in image below.

enter image description here

And add some padding of 8px between Number and Text spans in NumberAndText div.

Also i want to set ellipsis for the Name div.

below is my code,

return (

    <Wrapper>
        <div>left side <div>
        <RightContainer>
            <Name>name</Name>
            <NumberAndText>
                <Number>200</Number>
                <Text>Text</Text>
            </NumberAndText>
        </RightContainer>
    </Wrapper>
);

const Wrapper = styled.div`
    margin-right: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
`;

 
const RightContainer = styled.div`
    //no styles yet
`;

const Name = styled.span`
    font-size: 12px;
    font-weight: 700;
`;

 const NumberAndText = styled.div`
     display: flex;
     flex-direction: row;
     align-items: center;
 `;

  const Number = styled.span`
     font-size: 16px;
     font-weight: 700;
 `;

  const Text = styled.span`
     font-size: 12px;
     font-weight: 400;
 `;

what i have tried?

for adding ellipsis to Name div added like below,

const Name = styled.span`
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
`;

but this for some reason doesnt work. also i dont know how to make the Text in NumberAndText div to look like in picture added.

could someone help me with this. thanks.

Upvotes: 0

Views: 931

Answers (2)

Amit
Amit

Reputation: 1442

In this example, I have used "Roboto" font and adjusted the extra space at the bottom with line-height.

.Wrapper {
    margin-right: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Roboto', sans-serif;
}
.RightContainer{
  padding: 1rem
}
.Name{
    font-size: 12px;
    font-weight: 700;
}
.NumberAndText { 
     display: flex;
     flex-flow: row wrap;
     align-items: flex-end;
     line-height: 1;
}
.Number {
     font-size: 16px;
     font-weight: 700;
     color: #0095ff;
}
.Text {
     font-size: 12px;
     font-weight: 400;
     padding-left: 5px;
     line-height: 1.3;
}
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<div class="Wrapper">
  <div class="LeftDiv">Left Side</div>
  <div class="RightContainer">
    <div class="Name">Name</div>
    <div class="NumberAndText">
     <div class="Number">300</div>
     <div class="Text">Text</div>
    </div>
  </div>
</div>

Upvotes: 0

pilchard
pilchard

Reputation: 12918

In order to align items by baseline use align-items: baseline rather than align-items: center.

In order for your overflow to work, there needs to be overflow to begin with. Unless you specify a constraint on the width of the span it will just grow to accommodate its content.

#number-text {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

#number {
  font-size: 16px;
  font-weight: 700;
}

#text {
  font-size: 12px;
  font-weight: 400;
  width: 40px;
  padding-left: 8px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
<div id="number-text">
  <span id="number">200</span>
  <span id="text">Text with overflow</span>
</div>

Upvotes: 2

Related Questions