I want to have a box with text and an Icon inside. The Icon is supposed to stick to the right side of the box, the text to the left.
If the text is too long to fit into the box next to the icon, I want it to be shortend by the text-overflow:ellipsis property. I do not insist on implementing it with Flex-Box, if there is a better way to do it.
It should look like this:
And this is what I achieved so far:
div#Wrapper {
border: 0.2em solid black;
width: 6em;
padding: 0.5em;
display: flex;
}
span#Text {
white-space: nowrap;
text-overflow: ellipsis;
}
span#Icon {
background-color: blue;
border-radius: 50%;
height: 1em;
width: 1em;
display: inline-block;
margin-left: auto;
}
Short Text:
<div id="Wrapper">
<span id="Text">
This
</span>
<span id="Icon">
</span>
</div>
<br><br><br>
Text:
<div id="Wrapper">
<span id="Text">
This is Text
</span>
<span id="Icon">
</span>
</div>
<br><br><br>
Long Text:
<div id="Wrapper">
<span id="Text">
This is long long long Text
</span>
<span id="Icon">
</span>
</div>
You can add flex: 1 and overflow: hidden properties on text element.
div#Wrapper {
border: 0.2em solid black;
width: 6em;
padding: 0.5em;
display: flex;
}
span#Text {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
span#Icon {
background-color: blue;
border-radius: 50%;
height: 1em;
width: 1em;
margin-left: auto;
}
<div id="Wrapper">
<span id="Text">
This is long long long Text
</span>
<span id="Icon"></span>
</div>
I have replaced the ID's with classes since the ID must be unique in the document. Furthermore, I added overflow: hidden for the text and flex: 0 0 auto for the icon.
div#Wrapper {
border: 0.2em solid black;
width: 6em;
padding: 0.5em;
display: flex;
}
span.Text {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden; /* Added */
}
span.Icon {
background-color: blue;
border-radius: 50%;
height: 1em;
width: 1em;
display: inline-block;
margin-left: auto;
flex: 0 0 auto; /* Added */
}
Short Text:
<div id="Wrapper">
<span class="Text">
This
</span>
<span class="Icon">
</span>
</div>
<br><br><br> Text:
<div id="Wrapper">
<span class="Text">
This is Text
</span>
<span class="Icon">
</span>
</div>
<br><br><br> Long Text:
<div id="Wrapper">
<span class="Text">
This is long long long Text
</span>
<span class="Icon">
</span>
</div>
Here you go.
https://jsfiddle.net/hxz05g9j
Another approach is make circle as :after css.
Related
I'm trying to create a container that has a small label on the top right edge (like the green span of the code below), and I don't want it to cover the text. The text must be vertically centered.
Using position: absolute the text is covered, using float: right I couldn't align the text in the center. How can I do this?
Here are my attempts:
Using position: absolute
<div class="container">
<div class="item-1"></div>
<div class="item-2">
<span class="sub-item-1"></span>
<span class="sub-item-2">Centered text</span>
</div>
</div>
<br>
<div class="container">
<div class="item-1"></div>
<div class="item-2">
<span class="sub-item-1"></span>
<span class="sub-item-2">Centered text one two three four five six seven</span>
</div>
</div>
<style>
.container {
position: relative;
min-height: 50px;
width: 200px;
border: 2px solid red;
display: flex;
align-items: flex-start;
}
.item-1 {
height: 40px;
min-width: 60px;
border: 1px solid blue;
align-self: center;
}
.item-2 {
width: 100%;
align-self: center;
}
.sub-item-1 {
height: 10px;
min-width: 35px;
border: 2px solid green;
margin-top: -2px;
margin-right: -2px;
position: absolute;
top: 0;
right: 0;
}
</style>
Using float: right
<div class="container">
<div class="item-1"></div>
<div class="item-2">
<span class="sub-item-1"></span>
<span class="sub-item-2">Centered text</span>
</div>
</div>
<br>
<div class="container">
<div class="item-1"></div>
<div class="item-2">
<span class="sub-item-1"></span>
<span class="sub-item-2">Centered text one two three four five six seven</span>
</div>
</div>
<style>
.container {
position: relative;
min-height: 50px;
width: 200px;
border: 2px solid red;
display: flex;
align-items: flex-start;
}
.item-1 {
height: 40px;
min-width: 60px;
border: 1px solid blue;
align-self: center;
}
.item-2 {
width: 100%;
}
.sub-item-1 {
height: 10px;
min-width: 35px;
border: 2px solid green;
margin-top: -2px;
margin-right: -2px;
float:right;
}
</style>
Here, float is content sensitive & absolute positioning is not.
(must go with float if you can text under it)
and your inline element can't be full height (because filled height inline element can't centre it's content vertically)
So, you can use line-height: 50px; to sub-item-2 if it's one line text.
Hope it will solve your issue mostly -
<div class="container">
<div class="item-1"></div>
<div class="item-2">
<span class="sub-item-1"></span>
<span class="sub-item-2">Centered text</span>
</div>
</div>
<br>
<div class="container">
<div class="item-1"></div>
<div class="item-2">
<span class="sub-item-1"></span>
<span class="sub-item-2">Centered text one two three four five six seven</span>
</div>
</div>
<style>
.container {
position: relative;
height: 50px;
width: 200px;
border: 2px solid red;
display: flex;
align-items: flex-start;
}
.item-1 {
height: 40px;
min-width: 60px;
border: 1px solid blue;
align-self: center;
}
.item-2 {
width: 100%;
height: 100%;
}
.sub-item-1 {
height: 10px;
min-width: 35px;
border: 2px solid green;
margin-top: -2px;
margin-right: -2px;
float:right;
}
.sub-item-2 {
margin: auto 0;
vertical-align: middle;
height: 100%;
}
.sub-item-2:after {
content:"";
width: 1px;
display: inline-block;
height: 100%;
vertical-align: middle;
}
</style>
I have a div with some elements. I want these elements to be 100% width of the container div.
.container {
height: 100px;
width: 100px;
display: flex;
flex-direction: column;
overflow: scroll;
border: 1px solid black;
}
.inner {
width: 100%;
background-color: gray;
white-space: nowrap;
}
<div class="container">
<span class="inner">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</span>
<span class="inner">XXX</span>
<span class="inner">XXX</span>
</div>
As you can see if you horizontally scroll, the background is not 100% complete.
update your code like below:
.container {
height: 100px;
width: 100px;
display: flex;
flex-direction: column;
overflow: scroll;
border: 1px solid black;
align-items:flex-start; /* disable the stretch alignment*/
}
.inner {
min-width: 100%; /* min-width instead of width*/
background-color: gray;
white-space: nowrap;
}
<div class="container">
<span class="inner">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</span>
<span class="inner">XXX</span>
<span class="inner">XXX</span>
</div>
Or like below if you want all elements to get full coloration
.container {
height: 100px;
width: 100px;
overflow: scroll;
border: 1px solid black;
}
.container>div {
min-width: 100%;
display: inline-block;
}
.inner {
display:block;
background-color: gray;
white-space: nowrap;
}
<div class="container">
<div>
<span class="inner">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</span>
<span class="inner">XXX</span>
<span class="inner">XXX</span>
</div>
</div>
Here's the flex solution.
Replace flex-direction: column with flex-flow: column wrap in .container. And remove width: 100% from .inner.
And you get the desired result.
.container {
height: 100px;
width: 100px;
display: flex;
/*flex-direction: column;*/
flex-flow: column wrap;
overflow: scroll;
border: 1px solid black;
}
.inner {
/*width: 100%;*/
background-color: gray;
white-space: nowrap;
}
<div class="container">
<span class="inner">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</span>
<span class="inner">XXX</span>
<span class="inner">XXX</span>
</div>
UPDATE: I have came up with this non-flexbox solution (A curiosity driven actioin) Initially I misunderstood the question.
SOLUTION 1: Adding a wrapper div around your spans.
.container {
height: 100px;
width: 100px;
border: 1px solid black;
overflow-x:scroll;
}
.wrapper{
background:orange;
height:auto;
width:max-content;
}
.inner{
display:block;
min-width:100px;
}
<div class="container">
<div class="wrapper">
<span class="inner">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</span>
<span class="inner">XXX</span>
<span class="inner">XXX</span>
</div>
</div>
Just put a display: block in the span elements because their default display is inline, and that's why they behave the way they are behaving,
I am trying to make menu items out of the following items, but I'm struggling with making the text inside the paragraph element responsive to its parent. I tried all positioning combinations, as well as every possible combination with percentages and sizing, but nothing worked the way it's supposed to.
I just want to have the text centered inside the circles...
.div-1 {
display: inline-block;
margin: 0 15px;
border: solid 1px blue;
padding: 20px;
height: 80px;
width: 80px;
border-radius: 50%;
}
<span class="navbar-text">
<div class="div-1">
<p>Home</p>
</div>
<div class="div-1">
<p>Services</p>
</div>
<div class="div-1">
<p>Programs</p>
</div>
</span>
You can see I used flexbox to achieve what you wanted.
.navbar-text {
display: flex;
justify-content: space-around;
}
.div-1 {
display: flex;
align-items: center;
justify-content: center;
border: solid 1px blue;
padding: 20px;
height: 80px;
width: 80px;
border-radius: 50%;
}
<span class="navbar-text">
<div class="div-1">
<p>Home</p>
</div>
<div class="div-1">
<p>Services</p>
</div>
<div class="div-1">
<p>Programs</p>
</div>
</span>
Here you go using flex box for aligment.
.div-1 {
display: flex;
margin: 0 15px;
border: solid 1px blue;
padding: 20px;
height: 80px;
width: 80px;
border-radius: 50%;
align-items:center;
justify-content: center;
}
.div-1 p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<span class="navbar-text" style="display:flex">
<div class="div-1">
<p>Home</p>
</div>
<div class="div-1">
<p>Services</p>
</div>
<div class="div-1">
<p>Programsasdfsdfsdfsdfds</p>
</div>
</span>
I decided to add not-flex approach
You can try to use text-align and line-height. But one issue here - it doesn't support multiline. If you want long texts - then use flex.
.div-1 {
display: inline-block;
margin: 0 15px;
border: solid 1px blue;
padding: 20px;
height: 80px;
width: 80px;
border-radius: 50%;
text-align: center;
line-height: 80px;
}
.div-1 > p {
margin: 0;
}
<span class="navbar-text">
<div class="div-1">
<p>Home</p>
</div>
<div class="div-1">
<p>Services</p>
</div>
<div class="div-1">
<p>Programs</p>
</div>
</span>
.div-1 {
display: flex;
margin: 0 15px;
border: solid 1px blue;
padding: 20px;
height: 80px;
width: 80px;
border-radius: 50%;
align-items:center;
justify-content: center;
}
.div-1 p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
I am displaying some text in a span element contained in a fixed width structure using ellipsis if said text overflows. A Boostrap tooltip is initialized in such elements so that the full text can be visualized. However the full width of the span visually misplaces the tooltip. How can I adjust its width so that the tooltip is rendered in a proper position?
Below a working snippet (fiddle link).
$('.venue').tooltip({
placement: 'right',
container: 'body'
});
#import("https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css") .round {
margin: 40px 20px;
background: #ededed;
width: 150px;
}
.match {
height: 190x;
position: relative;
}
.team {
width: 155px;
height: 22px;
background: #eee;
position: relative;
}
.label {
width: 120px;
position: absolute;
}
.score {
width: 35px;
float: right;
}
.scheduling {
width: 100%;
position: absolute;
top: 23px;
}
.scheduling>.wrapper {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="round">
<div class="match">
<div class="team">
<div class="label">Team 1</div>
<div class="score">0</div>
<div class="scheduling">
<div class="wrapper">
<span class="date">24/10/2019</span> —
<span class="venue" title="Very Long Venue Name">Very Long Venue Name</span>
</div>
</div>
</div>
</div>
</div>
My first proposal:
.scheduling > .wrapper {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.venue {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
My second proposal: deplace title
<div class="wrapper" title="Very Long Venue Name">
<span class="date">24/10/2019</span>
—
<span class="venue" >Very Long Venue Name</span>
</div>
and
$('.wrapper').tooltip({placement: 'right', container: 'body'});
I am having some issues trying to get text-overflow: ellipsis to work on a span where I don't have a fixed width. The span should expand according to the content, but if the content is larger than the space available, then the content should show ellipsis. Here is a link to JSFiddle.
The CSS and HTML:
.row {
width: 50%;
border: 1px solid black;
}
.wrapper {
text-align: left;
}
.label {
display: inline-block;
margin-top: 10px;
margin-right: 4px;
padding: 0 8px;
border-radius: 4px;
color: white;
background-color: grey;
height: 20px;
vertical-align: middle;
font-size: 14px;
}
.content {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div class="row">
<div class="wrapper">
<div class="label">
<span class="content">text</span>
</div>
<div class="label">
<span class="content">longer text label</span>
</div>
<div class="label">
<span class="content">Another label</span>
</div>
<div class="label">
<span class="content">A very very very very very very long text label that should fit inside row and cut the text and show ellipsis...</span>
</div>
</div>
</div>
Check this plunker:
https://jsfiddle.net/42khut93/3/
You need to set max-width for both the label and content classes
and adjust the padding in percentage.
Also set the .content display to block or inline-block
.row {
width: 50%;
border: 1px solid black;
}
.wrapper {
text-align: left;
}
.label {
display: inline-block;
margin-top: 10px;
margin-right: 4px;
padding: 0 1%; //in percentage
border-radius: 4px;
color: white;
background-color: grey;
height: 20px;
vertical-align: middle;
font-size: 14px;
max-width: 98%; //max-width 100% - 1% padding + 1% padding
}
.content {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%; // set max-width
}
<div class="row">
<div class="wrapper">
<div class="label">
<span class="content">text</span>
</div>
<div class="label">
<span class="content">longer text label</span>
</div>
<div class="label">
<span class="content">Another label</span>
</div>
<div class="label">
<span class="content">A very very very very very very long text label that should fit inside row and cut the text and show ellipsis...</span>
</div>
</div>
</div>