I want to show the text an ellipsis to the user.
I use the text-overflow property.
Text must be next to numbers, but text is long.
If I define the width, there is a large space, which is ugly. If I put the width auto, the text is long
This is code:
.holder-new {
position: relative;
bottom: 0;
width: 90%;
background: red;
height: 50px;
padding-top: 0;
margin: 0 auto;
display: flex;
justify-content: center;
flex-direction: column;
}
.holder-content {
width: auto;
display: inline-flex;
}
.name {
padding: 0!important;
width: auto!important;
padding-right: 5px!important;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: inline-block;
}
.duration {
padding: 0!important;
width: 15%!important;
}
<div class="holder-new">
<div class="holder-content">
<div class="name"><span>The text-overflow property </span></div>
<div class="duration"><span>1:02</span></div>
</div>
</div>
<div class="holder-new">
<div class="holder-content">
<div class="name"><span>The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user </span></div>
<div class="duration"><span>1:02</span></div>
</div>
</div>
Demo:
https://jsfiddle.net/xpvt214o/689404/
Just set a fixed px or percentage width for the right DIV (the time) and set width: auto for the left DIV (i.e. the text). If you use a pixel value for the right DIV, it will work for all container sizes / be responsive:
https://jsfiddle.net/em2svpko/
Related
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 11 months ago.
My overflow text has two parents, each have display: flex. The overflow with ellipsis seems only to work if on parent is removed. Otherwise the text keeps it width and determines the parent width. You can test it in the fiddle by reducing the browser width. What is wrong?
jsfiddle
.wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
background: lightgrey;
max-width: 600px;
}
p {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-right: 20px;
}
<div class="wrap">
<div class="wrap">
<p>
1) looooooooooooooooooooooooooooooooooooong text
</p>
</div>
</div>
A very common problem when we try to make CSS shortcut for text is: when we try to combine flex-box layout (display: flex;) with text-overflow: ellipsis;.
The solution for this problem is to use min-width: 0; for parent element that we want to shortcut text.
So you can simply use min-width: 0px; in your parent div.
like
.wrap{
display: flex;
flex-wrap: wrap;
align-items: center;
background: lightgrey;
min-width: 0px; // use 0px in min width
}
try this your problem will be solved.
You have to define an explicit with (in this case 100%) on the flex containers.
It will work with this code:
.wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
background: lightgrey;
max-width: 600px;
width: 100%;
}
p {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-right: 20px;
display: block;
width: 100%;
}
<div class="wrap">
<div class="wrap">
<p>
1) looooooooooooooooooooooooooooooooooooong text
</p>
</div>
</div>
I have two divs, they should be displayed on same line.
Div one is dynamic width, user typed text.
Div two is date, which is placed on right side.
When there's not enough width (mobile phone) I want the user typed text that doesn't fit the screen width to be overflowed.
I tried the following but max-width is not working here, as it only overflows text till some point:
.parent {
display: table;
width: 100%;
}
.dynamic {
display: inline-block;
max-width: 80%;
}
.fixed {
display: table-cell;
width: 75px;
}
.cutting-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div class="parent">
<div class="dynamic cutting-text">
could be very long text. overflows till max-width reached, so doesn't work for small screens
</div>
<div class="fixed">
30.11.16
</div>
</div>
How to achieve this for arbitrary text?
JSFiddle as well
Use CSS Flexbox. Its quite easy to implement it in flexbox. Make your .parent a flex container and apply flex properties to .dynamic { flex: 1; }. Everything will get in place automatically.
Have a look at the snippet below:
.parent {
display: flex;
width: 100%;
}
.dynamic {
flex: 1;
}
.cutting-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div class="parent">
<div class="dynamic cutting-text">
could be very long text. overflows till max-width reached, so doesn't work for small screens
</div>
<div class="fixed">
30.11.16
</div>
</div>
Hope this helps!
Take a look at the Updated Fiddle
Changes:
.fixed {
width: 70px;
right: 0;
position: absolute;
}
.cutting-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.dynamic {
max-width: 80%;
}
.parent {
display: flex;
width: 100%;
}
I'm running into an issue with floats. I have two divs I need to always be side-by-side, on the same line. They should not wrap when the screen is resized down. One must be floated left, the other floated right. If the screen width is too small to display both divs entirely, then the user must be able to scroll the main window to see all content (scrollbars should be where the user expects them to be, not "inner" scroll bars). I only want scrollbars to be visible if both floated divs are not entirely visible -- the scrollbars should not be otherwise visible.
The problem is, even when I set the container to use white-space: none; or overflow: visible, the divs still wrap.
I need the divs to always stay inline with one another.
important NOTE: the contents of the two floated divs will be variable in width; I have hard-coded some sizes for demo sakes but those are NOT always the sizes they will be. the divs must be inline with one another regardless of their contents.
fiddle: http://jsbin.com/yidapiriya/edit?html,css,output
markup:
<div class="container clearfix">
<div class="content-container">
<!-- the width/height of this div will be variable based on content... this is just hardcoded for demo purposes -->
<div style="width: 400px; height: 400px;"></div>
</div>
<div class="ads-container">
<!-- the width/height of this div will be variable based on content... this is just hardcoded for demo purposes -->
<div style="width: 640px; height: 480px;"></div>
</div>
</div>
CSS:
* {
box-sizing: border-box;
outline: 1px solid black;
}
.container {
white-space: nowrap;
width: auto;
max-width: 1600px;
margin: 0 auto;
height: auto;
padding: 1rem 3.5%;
overflow: hidden;
}
.content-container {
width: auto;
white-space: normal;
margin-top: 2.5rem;
float: left;
display: inline-block;
height: 25rem;
}
.ads-container {
width: auto;
display: inline-block;
float: right;
text-align: right;
}
.clearfix{
}
.clearfix:before {
content: ' ';
display: table;
}
.clearfix:after {
clear: both;
content: ' ';
display: table;
}
As per i understand your question you need two div be inline even if window is resize set min-width: to container
.container {
min-width: 1400px;
...
}
demo
UPDATE
New Demo
.container {
.....
min-width:380px;
}
.container > div{
display:inline-block;
position: relative;
width: 50%;
float: left;
}
Just remove the float: left and float: right from the .ads-container and .content-container and set overflow: auto; for .container
I am building on the question originally asked here How to center horizontal table-cell with a slight modification.
Basically, DIVs need to be centered as they are now, however, I also need to vertically align all the content in the cell in the middle.
Changing vertical-align: middle; for .column does NOTHING. If I change display: inline-block; for .column to display: table-cell, it will align content in the middle, but then .column DIVs are no longer centered and widths are all broken (currently all a evenly set to 25%). Setting margin:auto; or text-align on parent does nothing.
I've been running around this for days. Your help is appreciated.
/* Setting the container to be a table with maximum width and height */
#container {
display: table;
height: 100%;
width: 100%;
}
/* All sections (container's children) should be table rows with minimal height */
.section {
display: table-row;
min-height: 1px;
}
/* We need one extra container, setting it to full width */
.columns-container {
display: table-cell;
height: 100%;
width:100%;
text-align: center;
}
/* Creating columns */
.column {
display: inline-block;
vertical-align: middle;
min-height: 150px;
width: 25%;
text-align: left;
}
#a {
background-color: pink;
}
#b {
background-color: lightgreen;
}
#c {
background-color: lightblue;
}
<div id="container">
<div class="section">
<div class="columns-container">
<div class="column" id="a"> Contents A </div>
<div class="column" id="b"> Contents B </div>
<div class="column" id="c"> Contents C </div>
</div>
</div>
</div>
You could do it like the follows, it uses CSS3 Transforms, see the browser support details. And be aware of the white spaces thing on inline block.
JsFiddle demo
.container {
text-align: center;
margin: 0 auto;
}
.column {
display: inline-block;
width: 150px;
height: 150px;
}
.column > div {
position: relative;
top: 50%;
transform: translateY(-50%);
}
#a { background-color: pink; }
#b { background-color: lightgreen; }
#c { background-color: lightblue; }
<div class="container">
<div class="column" id="a"><div>Contents A</div></div>
<div class="column" id="b"><div>Contents B</div></div>
<div class="column" id="c"><div>Contents C</div></div>
</div>
setting your .column's line-height to the height of the element is step one; so: line-height:150px vertically aligns the content.
Then, simply edit the text-align:left style declaration you have set on .column to text-align:center finishes the vertically alignment in this case.
here's a fiddle:
http://jsfiddle.net/jalbertbowdenii/t2xgL3rm/
Why in the following example the height of the inner div is not like wrapper's div ?
Live demo here.
HTML:
<div class="wrapper">
<div class="inner">Hello</div>
<div class="inner">Peace</div>
</div>
CSS:
.wrapper {
background-color: #000;
min-height: 100px;
}
.inner {
display: inline-block;
background-color: #777;
height: 100%;
}
If I change min-height: 100px; to height: 100px;, then it looks OK. But, in my case, I need min-height.
Some properties in CSS inherit the value of the parent automatically, some don't. Minimum height must be explicitly stated when you want it to inherit the parent's value:
min-height: inherit;
I believe this is the output you want: http://jsfiddle.net/xhp7x/
.wrapper {
display: table;
background-color: #000;
height: 100px;
width: 100%;
}
.wrapper2 {
height: 100%;
display: table-row
}
.inner {
height: 100%;
display: inline-block;
background-color: #777;
margin-right: 10px;
vertical-align: top;
}
Had to add a second DIV wrapper2.
Tested on chrome and firefox.
You want to specify both, CSS height is not the same as min-height. You want to specify both height and min-height.
height = When used as a %, this is a percent of the window height
min-height = as you drag the window smaller, the DIV with a % height will continue to reduce until it hits the min-height
max-height = as you drag the window larger, the DIV with a % height will continue to increase until it hits the max-height
http://jsfiddle.net/gpeKW/2/ I've added a sample here with borders.
Slight change to the answer from your comment, you are pretty much correct from your original CSS.
The below HTML will have a minimum div height of 100px. As the size of the inner DIV increases, the wrapper will automatically expand. I have demonstrated this by adding a style attribute to the first inner class.
<html>
<head>
<title>Untitled Page</title>
<style type="text/css">
.wrapper
{
background-color: #000;
min-height:100px;
}
.inner
{
display: inline-block;
background-color: #777;
height: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="inner" style="height:200px">test</div>
<div class="inner">Peace</div>
</div>
</body>
</html>
I know one way to set the div child height the same as its parent div height is to use relative for the parent and absolute position for the child.
.wrapper {
background-color: #000;
min-height: 100px;
position: relative;
}
.inner {
display: inline-block;
background-color: #777;
position: absolute;
height: 100%;
}
But this way will cause some problem, you have to adjust the child element so that it will be displayed properly
P/s: Why don't you set it to the same height as its parent height? I mean, 100% is not x%... just thinking..
Anyway, happy coding ;)
I certainly joined answers and the result using 'min-height' for the -main HTML tag- (class = "main-page-container"):
HTML:
<div id="divMainContent">
<!-- before or after you can use multiples divs or containers HTML elements-->
<div> </div>
<div> </div>
<main class="main-page-container">
<div class="wrapper">
1
<div class="wrapper2">
2
<div class="child">3</div>
</div>
</div>
</main>
<!-- before or after you can use multiples divs or containers HTML elements-->
<div class="footer-page-container bg-danger" > more relevant info</div>
</div>
CSS:
/*#region ---- app component containers ---- */
#divMainContent {
height: 100%;
display: flex;
flex-direction: column;
/*optional: max width for screens with high resolution*/
max-width: 1280px;
margin:0 auto;
}
.main-page-container {
display: inline-table;
height: 70%;
min-height: 70%;
width: 100%;
}
.footer-page-container{
flex:1; /* important in order to cover the rest of height */
/* this is just for your internal html tags
display: flex;
flex-direction: column;
justify-content: space-between; */
}
/*#endregion ---- app component containers ---- */
.wrapper {
background: blue;
max-width: 1280px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
}
.wrapper2 {
width: 90%;
margin: auto;
background: pink;
display: flex;
flex-wrap: wrap;
gap: 20px;
height: 90%;
}
.child {
min-height: 100px;
min-width: 300px;
background: orange;
position: relative;
width: 33%;
}