Apologies for the lackluster title, struggling to find a more suitable description for this particular issue.
Within a container, there are 2 spans that contain varying content, making it difficult to rely solely on media queries. The length of text in the left span can range from 20 to 100 characters, for example.
My objective is to have a hyphen placed between the left and right span elements only when the text in the left span occupies a single line. If the text breaks onto a new line, the hyphen should be removed.
Component
import React from "react";
import styled from "styled-components";
const Container = styled.div`
display: flex;
height: 44px;
align-items: center;
justify-content: center;
cursor: pointer;
`;
const Wrapper = styled.div`
display: flex;
flex-direction: row;
align-items: center;
cursor: pointer;
overflow: hidden;
padding: 0 10px;
`;
const Text = styled.p`
font-weight: normal;
color: #ffffff;
font-size: 14px;
display: flex;
`;
const Left = styled.span`
white-space: pre-line;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 5px;
background: green;
&::after {
content: " - ";
}
`;
const Right = styled.span`
background: blue;
`;
const Content = ({ rightText, leftText }) => {
return (
<Container>
<Wrapper>
<Text>
<Left>{leftText}</Left>
<Right>{rightText}</Right>
</Text>
</Wrapper>
</Container>
);
};
export default Content;
In the first instance shown here, a hyphen is present to the right of the text, which isn't desired for that specific case but is required for the other two instances.
https://i.sstatic.net/aawAc.png
Is there a method using CSS or JS to dynamically add the hyphen only when the left text fits on a single line?
https://codesandbox.io/s/cranky-chaplygin-gdjgjk?fontsize=14&hidenavigation=1&theme=dark