HTML:
<nav>
<span>
<h3>123</h3>
<h3>111111111111111111111111111111111111111111111111111111111111</h3>
</span>
</nav>
SCSS:
nav {
width: 100%;
display: flex;
justify-content: center;
span {
display: inline-flex;
align-items: center;
h3 {
overflow: hidden;
max-width: 30%;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0 1em;
}
}
}
The code in here:
https://codepen.io/arkceajin/pen/bKNOwX
Could see an invisible area inside <span>, and it will expand if increase the text contents.
Expected result: make the <span> align centre in <nav>.
In your example span is a flex-container - so it should have justify-content: center if you want to center it's children along main axis.
nav {
width: 100%;
display: flex;
}
nav span {
display: inline-flex;
border: 1px solid blue;
justify-content: center;
}
nav span h3 {
border: 1px solid red;
overflow: hidden;
max-width: 30%;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0 1em;
}
<nav>
<span>
<h3>123</h3>
<h3>111111111111111111111111111111111111111111111111111111111111</h3>
</span>
</nav>
Related
I was trying to make my design responsive by making it so that when the screen gets smaller in width, the text should be 'cut off' by three dots. However, this does not seem to function in my situation, as the .container element just seems to overflow into the main element, instead of the text getting smaller. How could I fix this? Thanks in advance!
<main>
<div class="container">
<section class="account-section">
<h5 class="username">WWWWWWWWWWWWWWWWW</h5>
</section>
</div>
</main>
<style>
main {
height: 200px;
display: grid;
place-items: center;
padding: 50px;
}
.container {
position: relative;
display: grid;
grid-template: fit-content(100%) / 100%;
max-width: 1240px;
width: 100%;
position: relative;
}
.account-section {
height: fit-content;
background: var(--white);
box-shadow: 0 0 50px rgb(0, 0, 0, 0.15);
padding: 25px;
position: relative;
flex-shrink: 1;
}
.username {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
</style>
overflow in this context means, that the content cannot fit in the container and so overflows. Here the container is the <h5>, while the content is the text. The <h5> will just grow according to the text content by default, because it's not constrained, neither by rules set to itself nor by rules for the parent.
If you put a width: 20% on the <h5> as demonstrated below for example, the text would overflow, and the text-overflow: ellipsis kicks in.
Another option would be to add overflow: hidden to the parent with class .account-section
Just click on the Run code snippet button, and you'll see.
main {
height: 200px;
display: grid;
place-items: center;
padding: 50px;
}
.container {
position: relative;
display: grid;
grid-template: fit-content(100%) / 100%;
max-width: 1240px;
width: 100%;
position: relative;
}
.account-section {
height: fit-content;
background: var(--white);
box-shadow: 0 0 50px rgb(0, 0, 0, 0.15);
padding: 25px;
position: relative;
flex-shrink: 1;
overflow: hidden;
}
.username {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 20%;
}
.username-fullwidth {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<main>
<div class="container">
<section class="account-section">
<h5 class="username">WWWWWWWWWWWWWWWWW</h5>
</section>
</div>
<div class="container">
<section class="account-section">
<h5 class="username-fullwidth">WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWw</h5>
</section>
</div>
</main>
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 4 months ago.
I have a horizontally centered column of Flex items ordered from 1 to 5 that are aligned from the top of the container like this:
body, html {
height: 100%;
position: relative;
margin: 0;
padding: 0;
}
.container {
display: inline-flex;
flex-wrap: wrap;
flex-direction: column;
align-items: flex-end;
align-content: center;
width: 100%;
height: 100%;
background: pink;
}
.item {
margin: 1px;
width: 30px;
height: 30px;
background: green;
}
<div class=container><div class=item>1</div><div class=item>2</div><div class=item>3</div><div class=item>4</div><div class=item>5</div></div>
I would like to let it aligned by the bottom of the container instead. I manage to do it with flex-direction: column-reverse; like in the next Snippet:
body, html {
height: 100%;
position: relative;
margin: 0;
padding: 0;
}
.container {
display: inline-flex;
flex-wrap: wrap;
flex-direction: column-reverse;
align-items: flex-end;
align-content: center;
width: 100%;
height: 100%;
background: pink;
}
.item {
margin: 1px;
width: 30px;
height: 30px;
background: green;
}
<div class=container><div class=item>1</div><div class=item>2</div><div class=item>3</div><div class=item>4</div><div class=item>5</div></div>
However, as you see, the items get out of order! Is there a way to let a flex column on the bottom without reversing the items order using CSS? I tried every Flex property that I know so far without success.
You can use justify-content: end;
.container {
width: 150px;
height: 150px;
border: 1px solid black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: end;
}
.content {
width: 25px;
height: 25px;
border: 1px solid black;
}
<div class="container">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
</div>
You need to use the justify-content property to align content along the main axis (in your case vertically). You are using align-items which defines how the items should be aligned along the cross axis.
body, html {
height: 100%;
position: relative;
margin: 0;
padding: 0;
}
.container {
display: inline-flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: flex-end;
align-content: center;
width: 100%;
height: 100%;
background: pink;
}
.item {
margin: 1px;
width: 30px;
height: 30px;
background: green;
}
<div class=container>
<div class=item>1</div>
<div class=item>2</div>
<div class=item>3</div>
<div class=item>4</div>
<div class=item>5</div>
</div>
Here is small codepen example of problem.
https://codepen.io/artyor/pen/OJMrXMX
<div class="wrap">
<a>Row One</a>
<a>Row Two</a>
<a>Problematic Row</a>
<a>Row Four</a>
<a>Row Five</a>
</div>
<style>
body{
margin: 0;
background: gray;
display: flex;
justify-content: center;
align-items: center;
}
.wrap{
width: 200px;
height: auto;
background: silver;
font-size: 30px;
/* problem*/
display: flex;
flex-direction: column;
align-items: center;
}
.wrap > a{
border: 1px solid red;
}
</style>
Once the text in tag is too long, it line-breaks, which is normal and what I want.
But when that happens it puts only that item out of the flow, it's not centered anymore, and even if I somehow make it centered, it still takes full width of container(.wrap).
How do I make it act like other tags?
Does this provide an answer for you?
body{
margin: 0;
background: gray;
display: flex;
justify-content: center;
align-items: center;
}
.wrap{
width: 150px;
max-width: 150px;
height: auto;
background: silver;
font-size: 30px;
/* problem*/
display: flex;
flex-direction: column;
align-items: center;
}
.wrap > a{
width: 150px;
border: 1px solid red;
text-align:center;
}
<div class="wrap">
<a>Row One</a>
<a>Row Two</a>
<a>Problematic Row</a>
<a>Row Four</a>
<a>Row Five</a>
</div>
I just inserted these properties in .wrap class:
max-width: 150px to set the maximum value achievable for the elements width;
text-align: center to make the text aligned at the center horizontally.
Also I changed the values of .wrap > a width to 150px, to make the example the most clear possible.
I need to align text near an icon to middle.
See the admin word near the user icon in this sandbox:
https://codesandbox.io/s/fragrant-morning-267l5
I have this css, but it's not taking affect:
.HeaderToolbar {
background-color: black;
color: white;
fill: white;
width: 100%;
margin: 0 auto;
align-items: baseline;
vertical-align: middle;
/*white-space: nowrap;*/
}
I would suggest you to use elements like header, nav and div for layout along with flexbox instead of going for table to layout your header.
Please check following code. It shows basic mark up for header component with navigation and logo.
header {
width: 100vw;
height: 54px;
}
.header {
width: 100%;
max-width: 1000px;
margin: 0 auto;
display: flex;
align-items: center;
padding: 0 8px;
}
.logo {
flex: 1;
}
nav {
flex: 2;
display: flex;
justify-content: flex-end;
}
button {
padding: 8px 12px;
color: white;
border: none;
cursor: pointer;
}
.ghost {
color: black;
background: transparent;
}
<header>
<div class='header'>
<div class="logo">
<h2>Logo</h2>
</div>
<nav>
<button>Projects</button>
<button>Projects</button>
<button class='ghost'>Admin 😳</button>
<button>Profile</button>
</nav>
</div>
</header>
You need to add a class to your element and then add a css to your class:
display: flex;
justify-content: flex-start;
align-items: center;
I have a layout where I want to make the breadcrumb trail use up all of the available space in the row. In the same row I also have a div (.tools) which needs to be of a dynamic width as it's contents may vary.
At the moment I have to set the breadcrumb trail to a % width to get it to work roughly correctly, but this isn't ideal... I'd like it to just expand to fill the available space.
Any ideas?
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
background-color: lightgreen;
width: 100%;
box-sizing: border-box;
}
.breadcrumb {
display: flex;
align-items: center;
justify-content: flex-start;
white-space: nowrap;
width: 55%;
background-color: lightblue;
}
.breadcrumbItem {
display: flex;
flex: 0 10 auto;
min-width: 45px;
align-items: center;
overflow: hidden;
text-overflow: ellipsis;
}
.breadcrumbItem button {
border: 0;
background: none;
padding: 0 5px;
flex: 0 1 auto;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.tools {
display: flex;
justify-content: flex-end;
background-color: lightyellow;
}
.tools span, .tools button {
white-space: nowrap;
}
<header>
<div class="breadcrumb">
<div class="breadcrumbItem">
<button>Really long breadcrumb item here</button>
<span>
<span>></span>
</span>
</div>
<div class="breadcrumbItem">
<button>Another really long item that should ellipse when it gets too long, oidsf jsodifj dsoifj sdoifj sdoifj sdoifj sdoifj sdoifj sdoifj dsoifj sdoifj sd</button>
</div>
</div>
<div class="tools">
<span>0 photos selected</span>
<button>Button</button>
</div>
</header>
https://codepen.io/anon/pen/NYaQyV
You can use flex-grow: 1; or the shorthand flex: 1; along with min-width or overflow.
.breadcrumb {
...
flex: 1;
min-width: 0;
}
Or
.breadcrumb {
...
flex: 1;
overflow: hidden;
}
CodePen
you can achieve what you want with by adding flex: auto to the .breadcrumb selctor block. a lot of your css declarations are redundant. you need to look into them and group selectors having much declarations in common
header {
-webkit-display: flex;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
background-color: lightgreen;
width: 100%;
box-sizing: border-box;
}
.breadcrumb {
flex: auto; //note this line .you can change it to auto as well
display: flex;
align-items: center;
justify-content: flex-start;
white-space: nowrap;
background-color: lightblue;
}
.breadcrumbItem {
flex: auto;
min-width: 45px;
overflow: hidden;
text-overflow: ellipsis;
}
There's a lot of redundancy in your code. Here's a simplified version that may achieve your goals.
header {
display: flex;
padding: 16px 20px;
background-color: lightgreen;
}
.breadcrumb {
flex-grow: 1;
display: flex;
overflow: hidden;
background-color: lightblue;
}
.breadcrumbItem {
display: flex;
}
button {
border: 0;
background: none;
padding: 0 5px;
}
.breadcrumbItem:last-child {
overflow: hidden;
}
.breadcrumbItem:last-child button { /* ellipsis on second button only */
overflow: hidden;
text-overflow: ellipsis;
}
.tools {
margin-left: auto;
background-color: lightyellow;
}
* {
box-sizing: border-box;
white-space: nowrap;
}
<header>
<div class="breadcrumb">
<div class="breadcrumbItem">
<button>Really long breadcrumb item here</button>
<span>
<span>></span>
</span>
</div>
<div class="breadcrumbItem">
<button>Another really long item that should ellipse when it gets too long, oidsf jsodifj dsoifj sdoifj sdoifj sdoifj sdoifj sdoifj sdoifj dsoifj sdoifj sd</button>
</div>
</div>
<div class="tools">
<span>0 photos selected</span>
<button>Button</button>
</div>
</header>
revised codepen