The span appears when hovering over the container div, but it pushes the previous text to the left, how can I prevent that?
The height, width and border on the wrapper are just there to demonstrate the effect.
#wrapper {
text-align: center;
width: 500px;
height: 200px;
border: 1px solid black;
}
.element {
display: inline-block;
}
.element > span {
display: none;
}
.element:hover > span {
display: inline;
}
<div id="wrapper">
<div class="element">Some Sample Text <span>Some hovered text</span></div>
<br>
<div class="element">Some Sample Text <span>Some hovered text</span></div>
<br> ...
</div>
You can set position: absolute; to the span, also add white-space: nowrap; to the container to prevent wrapping as needed.
#wrapper {
text-align: center;
width: 500px;
height: 200px;
border: 1px solid black;
}
.element {
display: inline-block;
white-space: nowrap; /* NEW */
}
.element > span {
display: none;
position: absolute; /* NEW */
}
.element:hover > span {
display: inline;
}
<div id="wrapper">
<div class="element">Some Sample Text <span>Some hovered text</span></div>
<br>
<div class="element">Some Sample Text <span>Some hovered text</span></div>
<br> ...
</div>
Related
I have some text that can overflow the parent container:
body {
margin: 200px;
}
.container {
width: 100px;
height: 50px;
background-color: #bbb;
text-align: center;
}
.header {
white-space: nowrap;
}
<div class="container">
<div class="header">
Short Text
</div>
<div class="header">
Very long text that should not wrap and be center aligned
</div>
</div>
When text is short, it is center aligned, as expected.
However, when the text overflows the container, it's not center aligned anymore.
How could I align the text horizontally regardless of the length of the text?
Desired outcome:
html:
<div class="container">
<div class="header">
<div>Short Text</div>
</div>
<div class="header">
<div>Very long text that should not wrap and be center aligned</div>
</div>
</div>
</body>
</html>
css:
body {
margin: 200px;
}
.container {
width: 100px;
height: 50px;
background-color: #bbb;
display: flex;
flex-wrap: wrap;
}
.header {
white-space: nowrap;
position: relative;
left: 50%;
transform: translateX(-50%);
}
for demo here, https://jsfiddle.net/jinny/qs7wL4nv/33/
Use text-indent:
body {
margin: 200px;
}
.container {
width: 100px;
height: 50px;
background-color: #bbb;
text-align: center;
}
.header {
white-space: nowrap;
text-indent: -8em;
}
<div class="container">
<div>
Short Text
</div>
<div class="header">
Very long text that should not wrap and be center aligned
</div>
</div>
flexbox can do this easily
body {
margin:0 200px;
}
.container {
width: 100px;
height: 50px;
background-color: #bbb;
display:flex;
flex-wrap:wrap;
justify-content:center;
}
.header {
white-space: nowrap;
}
<div class="container">
<div class="header">
Short Text
</div>
<div class="header">
Very long text that should not wrap and be center aligned
</div>
</div>
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 4 years ago.
I would like to make the following layout:
<div class="main">
<div class="container">
<div class="first">
fixed size
</div>
<div class="second">
<span>very very very very very very very long text</span>
<span>other text</span>
</div>
<div class="third">
1000000000000000
</div>
</div>
</div>
to look like this:
Container should have three divs inside:
first div with fixed size
third div with width matching content
second div filling the remaining container witdh. Inside that div there are two spans. The first span should be the same with as it's parent and contain very long line of text that should be dotted if it cannot fit.
I tried the following css code:
* {
box-sizing: border-box;
}
.main {
width: 500px;
height: 500px;
border: 1px solid black;
padding: 10px;
}
.container {
display: flex;
width: 100%;
}
.container div {
display: flex;
border: 1px solid black;
}
.first {
flex: 0 0 100px;
}
.second {
flex-direction: column;
flex: 1;
}
span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid black;
}
.third {
flex: 0 1 auto;
}
but the result is not as I would like because the elements are overflowing outside of container and long text is not dotted.
What should I changed in my css to make this work?
Demo: https://stackblitz.com/edit/js-vnr21c
You need to set min-width:0 on the span's parent
* {
box-sizing: border-box;
}
.main {
width: 500px;
height: 500px;
border: 1px solid black;
padding: 10px;
}
.container {
display: flex;
}
.container div {
border: 1px solid black;
}
.first {
flex: 0 0 100px;
}
.second {
display: flex;
flex-direction: column;
min-width: 0;
}
span:first-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid black;
}
.third {
flex: 0 1 auto;
}
<div class="main">
<div class="container">
<div class="first">
fixed size
</div>
<div class="second">
<span>very very very very very very very very long text</span>
<span>other text</span>
</div>
<div class="third">
1000000000000000
</div>
</div>
</div>
I searched for this problem for quite a while now, but only found solutions to the opposite problem.
So here is my problem:
I have a side panel that should be only as wide as its content. This panel has a header with a potentially long title. That header should not expand the panel, but instead be ellipsed.
The HTML looks similar to this
<div class="outer">
<div class="inner">
<div class="header">
superlongtextthatshouldbeellipsed
</div>
<div class="line">
short text
</div>
<div class="line">
even shorter text
</div>
</div>
</div>
This is the CSS to demonstrate the problem
.outer {
background-color: #FFAAAA;
display: flex;
flex-direction: row;
}
.inner {
background-color: #AAAAFF;
display: flex;
flex-direction: column;
margin: 5px;
}
.header {
margin: 5px;
background-color: #AAFFAA;
white-space: nowrap;
overflow: none;
text-overflow: ellipsis;
}
.line {
margin: 5px;
background-color: #FFAAFF;
}
https://jsfiddle.net/1yn725hy/9/
In the fiddle the blue box should be as wide as the second purple box (+margin). The text in the green box should be ellipsed.
How do I do this?
EDIT: Just to clarify: The blue box should fit the content of the purple box which has a varying size. A fixed width does not solve the problem.
First of all your container has to have max-width or width fixed. Second of all your overflow has to be hidden instead of none:
.outer {
background-color: #FFAAAA;
display: flex;
flex-direction: row;
}
.inner {
background-color: #AAAAFF;
display: flex;
flex-direction: column;
margin: 5px;
}
.header {
margin: 5px;
background-color: #AAFFAA;
white-space: nowrap;
max-width:200px;
overflow: hidden;
text-overflow: ellipsis;
}
.line {
margin: 5px;
background-color: #FFAAFF;
}
<div class="outer">
<div class="inner">
<div class="header">
superlongtextthatshouldbeellipsed
</div>
<div class="line">
short text
</div>
<div class="line">
even shorter text
</div>
</div>
</div>
Ok, finally solved it myself. The trick is to use the almighty flexbox and wrap the header in it:
.outer {
background-color: #FFAAAA;
display: flex;
flex-direction: row;
}
.inner {
background-color: #AAAAFF;
display: flex;
flex-direction: column;
margin: 5px;
}
.header {
margin: 5px;
background-color: #AAFFAA;
display: flex;
}
.header2 {
width: 0px;
flex-grow: 1;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.line {
margin: 5px;
background-color: #FFAAFF;
}
<div class="outer">
<div class="inner">
<div class="header">
<div class="header2">
superlongtextthatshouldbeellipsed
</div>
</div>
<div class="line">
short text
</div>
<div class="line">
even shorter text
</div>
</div>
</div>
You should add some width to your div. Otherwise the header text wont ellipsed, because there is no "end".
https://jsfiddle.net/1yn725hy/14/
I have a div-container with a fix width and some child-elements witch could be bigger than the parent.
Is it possible to let all the child-elements take the full width of the scrollable area from the parent-element (overflow: auto)?
#container {
width: 200px;
background-color: grey;
overflow:auto;
margin:10px;
}
#container p{
display:block;
background-color: green;
white-space: nowrap;
width: 100%;
}
<div id="container">
<p>Sample Text 1</p>
<p>Sample Text 2</p>
<p>A very very very very very long Sample Text</p>
</div>
Here is the fiddle. When you scroll to the right, you can see that the child-elements background-color is smaller than the content.
Wrap the content in a div, and set it to display: inline-block:
#container {
width: 200px;
background-color: grey;
overflow: auto;
margin: 10px;
}
#container>div {
display: inline-block;
}
#container p {
display: block;
background-color: green;
white-space: nowrap;
}
<div id="container">
<div>
<p>Sample Text 1</p>
<p>Sample Text 2</p>
<p>A very very very very very long Sample Text</p>
</div>
</div>
You could set the child elements to display:table-row;
#container {
width: 200px;
background-color: grey;
overflow: auto;
}
#container p {
display: table-row;
background-color: green;
white-space: nowrap;
}
<div id="container">
<p>Sample Text 1</p>
<p>Sample Text 2</p>
<p>A very very very very very long Sample Text</p>
</div>
Add a extra <div> if you need extra controls for styling.
#container {
width: 200px;
background-color: grey;
overflow: auto;
}
#container div {
display: table;
border-spacing: 0 10px;
}
#container p {
display: table-row;
background-color: green;
white-space: nowrap;
}
<div id="container">
<div>
<p>Sample Text 1</p>
<p>Sample Text 2</p>
<p>A very very very very very long Sample Text</p>
</div>
</div>
You can use from absolute position property to do that .
#container {
width: 200px;
background-color: grey;
overflow:auto;
margin:10px;
}
#container p{
display:block;
background-color: green;
white-space: nowrap;
position:absolute;
}
I've searched it at online and found some solution. But, nothing works at my project. At most of the solution, I've found:
<div class="a">
<div class="b">
Unknown stuff to be centered.
</div>
</div>
.a {
display: table;
width: 100%;
}
.b {
display: table-cell;
text-align: center;
vertical-align: middle;
}
By applying this technique, I've tried to build something like this: http://jsfiddle.net/L2GZx/1/
The text of left column only needed to be aligned middle vertically. But, it's not working with that technique:
<div class="row">
<div class="left">
<p>Sample Text</p>
</div>
<div class="right">
<p>Text</p>
<p>Input Element</p>
<p>Table</p>
<p>Image</p>
</div>
</div>
<div class="row">
<div class="left">
<p>Sample Text Sample Text Sample Text Sample Text Sample Text </p>
</div>
<div class="right">
<p>Text</p>
<p>Input Element</p>
<p>Table</p>
<p>Image</p>
</div>
</div>
<div class="row">
<div class="left">
<p>Sample Text</p>
</div>
<div class="right">
<p>Text</p>
<p>Input Element</p>
<p>Table</p>
<p>Image</p>
</div>
</div>
CSS:
.row {
width: 100%;
background: #ccc;
border-bottom: 1px solid #999;
display: table;
}
.left {
float: left;
width: 40%;
padding: 20px;
display: table-cell;
vertical-align: middle;
}
.right {
float: right;
background: #fff;
width: 40%;
padding: 20px;
}
How can I make the text of left-column aligned middle vertically? Note: I can't use any fixed height as content of each row will be different
Remove the floats. Floated elements can not also be displayed as table-cells. See updated Fiddle.
.row {
width: 100%;
background: #ccc;
border-bottom: 1px solid #999;
display: table;
}
.left {
width: 40%;
padding: 20px;
display: table-cell;
vertical-align: middle;
}
.right {
display: table-cell;
background: #fff;
width: 40%;
padding: 20px;
}
.left {
width: 40%;
padding: 20px;
display: table-cell;
vertical-align: middle;
}
removing" float:left " from .left style solves that issue, but using table and div together is not that good.Working Example
An alternative that I prefer in a situation like this is:
To not use display: table-cell, but rather use display:
inline-block.
To then use vertical-align: middle on the element.
Sample (revised) markup / css:
<div class="row">
<div class="left">
<p>Sample Text</p>
</div>
<div class="right">
<p>Text</p>
<p>Input Element</p>
<p>Table</p>
<p>Image</p>
</div>
</div>
CSS:
.row {
width: 100%;
background: #ccc;
border-bottom: 1px solid #999;
}
.row > div {
display: inline-block;
/* below 2 lines are IE7 hack to make inline-block work */
zoom: 1;
*display: inline;
/* below is consolidated css for both left / right divs */
width: 40%;
padding: 20px;
}
.left {
vertical-align: middle; /* or top or bottom */
}
.right {
background: #fff;
vertical-align: top; /* or middle or bottom */
}
All you have to do is to add a line-height to the left column and it will be automatically aligned (without vertical-align so you can remove it).
Here it is:
.left {
float: left;
width: 40%;
padding: 20px;
display: table-cell;
line-height:150px;
}
And here is your updated FIDDLE
Using your first example, try something like this. I'll explain how it works in the CSS.
<div class="a">
<div class="b">
Unknown stuff to be centered.
</div>
</div>
.a {
width: 100%;
position: relative; /* We want our parent div to be the basis of our absolute positioned child div */
/* You can set your height here to whatever you want */
}
.b {
position: absolute;
width: 100%; /* Set to be the full width, so that our text is aligned centered */
text-align: center;
top: 50%; /* Positions the top of the div at 50% of the parent height */
left: 0; /* Assures that the child div will be left-most aligned */
margin-top: -.5em; /* Moves the top of our div up by half of the set font size */
height: 1em; /* Sets our height to the height of the desired font */
}
Here is the JSFiddle link to see a live example: http://jsfiddle.net/L2GZx/20/
This is one of the best solutions to absolutely center text inside of a webpage. It does have it's limitations however seeing how it won't react to other elements inside the same parent and it also has to have a set height. So multiline text will have it's shortcomings with this method.
I hope this helps!