I'm trying to fit some text and divs all into a single line (without wrapping) and using text-overflow: ellipsis. However in all my experimenting (I can't even recall all the things I've tried), the text fills up the entire line, and the divs get pushed down onto a new line.
I'd like the text to truncate so the blue boxes are on the same line as the text.
I'm able to get it to work with JS, but I want a pure CSS solution.
EDIT:
Sorry, I should have added some more details.
The text length is variable
The solution should allow for a responsive page design (I put the width: 400px to constrain the container, but in reality it's responsive, sorry I know my question was misleading.)
.page-container{
width: 400px;
background: yellow;
}
div.header {
white-space: nowrap;
display: inline;
width: 100%;
}
div.one-line-div {
font-size: larger;
white-space: nowrap;
width: 100%;
text-overflow: ellipsis;
display: inline-block;
overflow: hidden;
}
.move-divs {
display: inline-block;
float: right;
}
.div1, .div2, .div3, .div4 {
float: right;
margin-right: 12px;
cursor: pointer;
display: inline-block;
width: 30px;
height: 30px;
background: blue;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="page">
<div class="page-container">
<div class="header">
<div class="one-line-div">Text text, so much text here, what do we do with all this text?.
<div class="more-divs">
<div class="div1">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
<div class="div4">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Have you tried flex-box? Based on what I've tested it should work for you. You'll need to wrap your text in another div, though. And also need to change some things from inline-block back to block, etc. Basically flex-box is the new layout engine that allows you to do some awesome stuff. Generally you shouldn't ever need float if you use flex-box. Check out this guide on flex-box from CSS-Tricks. You can do some amazing things with it. Let me know if you have any questions regarding my answer. I didn't want to go into too much specifics because that'd be a pretty big rabbit hole.
.page-container{
width: 400px;
background: yellow;
}
/*
You don't need this anymore with flex.
div.header {
white-space: nowrap;
display: inline;
width: 100%;
}*/
/* Updated to use flex box. */
div.one-line-div {
display: flex;
flex-direction: row;
font-size: larger;
}
/* define the style for our .text element */
.text {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
/* our .move-divs needs to be flex too */
.more-divs {
display: flex;
flex-direction: row;
}
/* I removed the floats and display inline, since you don't need them */
.div1, .div2, .div3, .div4 {
margin-right: 12px;
cursor: pointer;
width: 30px;
height: 30px;
background: blue;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="page">
<div class="page-container">
<div class="header">
<div class="one-line-div">
<div class="text">
Text text, so much text here, what do we do with all this text?.
</div>
<div class="more-divs">
<div class="div1">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
<div class="div4">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
The solution: put the text in a "span" element . then do the following styles
.page-container{
width: 400px;
background: yellow;
}
div.header {
white-space: nowrap;
display: inline;
width: 100%;
}
div.one-line-div {
font-size: larger;
white-space: nowrap;
width: 100%;
text-overflow: ellipsis;
display: inline-block;
overflow: hidden;
}
.move-divs {
display: inline-block;
float: right;
}
.div1, .div2, .div3, .div4 {
float: right;
margin-right: 12px;
cursor: pointer;
display: inline-block;
width: 30px;
height: 30px;
background: blue;
}
.myText {
max-width: 55%;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
}
.more-divs {
display: inline-block
}
<div class="page">
<div class="page-container">
<div class="header">
<div class="one-line-div">
<span class="myText">Text text, so much text here, what do we do with all this
text?.</span>
<div class="more-divs"">
<div class="div1">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
<div class="div4">
</div>
</div>
</div>
</div>
</div>
It is easy and best using flex or grid , though here using float as you said.
When using float this display:inline-block is not needed because float it self makes elements display inline
.page{
background: yellow;
}
.page-container{
width: 400px;
}
div.header {
white-space: nowrap;
width: 100%;
}
div.one-line-div {
font-size: larger;
white-space: nowrap;
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
float: left;
}
.move-divs {
float: right;
}
.div1, .div2, .div3, .div4 {
margin-right: 12px;
cursor: pointer;
display: inline-block;
width: 30px;
height: 30px;
background: blue;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="page">
<div class="page-container">
<div class="header">
<div class="one-line-div">Text text, so much text here, what do we do with all this text?.</div>
<div class="more-divs">
<div class="div1">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
<div class="div4">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
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>
I need three elements. Two elements on either side, and one text element in the middle. The text in the middle needs to be left-aligned (floating) to the first element.
I need the text to truncate with ellipsis when the page is shrunk. But after specifying overflow styles, when the page is shrunk smaller than the width of the three combined they start moving to new positions and moving out of the parent container.
## This is sample text! ## would turn into ## This is samp... ## (where ## are the side elements) if the width could not accomodate all of the elements.
.container {
height: 30px;
background-color: #ff0000;
}
.container > .container-first {
display: inline-block;
background-color: #0000ff;
width: 20px;
height: 30px;
float: left;
}
.container > .container-second {
display: inline-block;
line-height: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
float: left;
}
.container > .container-third {
display: inline-block;
background-color: #00ff00;
width: 20px;
height: 30px;
float: right;
}
<div class="container">
<div class="container-first"></div>
<div class="container-second">This one has sample text!</div>
<div class="container-third"></div>
</div>
Note that this answer did not help because it just moves each child to its own line.
I am using a flexbox for the .container and set flex: 1 for .container-second. This way all floats can be removed and the document flow stays intact.
Hope this helps.
.container {
height: 30px;
background-color: #ff0000;
display: flex;
}
.container>.container-second {
flex: 1;
}
.container>.container-first {
display: inline-block;
background-color: #0000ff;
width: 20px;
height: 30px;
}
.container>.container-second {
display: inline-block;
line-height: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.container>.container-third {
display: inline-block;
background-color: #00ff00;
width: 20px;
height: 30px;
}
<div class="container">
<div class="container-first"></div>
<div class="container-second">This one has sample text!This one has sample text!This one has sample text!This one has sample text!This one has sample text!</div>
<div class="container-third"></div>
</div>
This can done easily by using bootstap grid and CSS overflow and text-overflow property.
You need to link bootstrap file in head section .
Check this out.
.ellipsis {
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-xs-3">
<div>Hello Hello</div>
</div>
<div class="col-md-4 col-xs-6">
<div class="ellipsis">Hello Hello Hello Hello Hello Hello </div>
</div>
<div class="col-md-4 col-xs-3">
<div>Hello Hello</div>
</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/
Im trying to do a little dashboard for some webservices i wrote, but whenever text within a widget breaks, the widget changes its position.
CSS looks like this:
#container {
text-align: center;
width: 100%;
height: auto;
}
.widget {
background-color: firebrick;
margin: 1px;
width: 200px;
height: 200px;
display: inline-block;
text-align: center;
word-break: break-all;
}
I reproduced that problem in a fiddle:
https://jsfiddle.net/vbb6fhz0/1/
If you want to align the box, then use float for better result. word-break has nothing to do with alignment.
But in your case, just vertical-align: middle solved the alignment issue
#container {
text-align: center;
width: 100%;
height: auto;
}
.widget {
background-color: firebrick;
margin: 1px;
width: 200px;
height: 200px;
display: inline-block;
text-align: center;
word-break: break-all;
vertical-align: middle;
}
<body>
<div style="width: 100%; height:100%;">
<div id="container">
<div class="widget">
<p>1dawdawdaegsergsergsrsrgrsddadawdadawdwdwbf</p>
</div>
<div class="widget">
2wdadawdad
</div>
<div class="widget">
3wadawdwdawda
</div>
<div class="widget">
4dawdawdaw
</div>
</div>
</div>
</body>
There is nothing bad with work-break you should try float
.widget{float:left;}
I'm trying to make a horizontally scrolling div with various other divs inside of it.
<div class="slider">
<div class="item">
<div class="info">
<h1>Title</h1>
</div>
</div>
<div class="item">
<div class="info">
<h1>This is a really long title</h1>
</div>
</div>
<div class="item">
<div class="info">
<h1>Title</h1>
</div>
</div>
</div>
.slider {
white-space: nowrap;
overflow: auto;
}
.item {
display: inline-block;
position: relative;
width: 200px;
height: 150px;
margin: 10px;
background: grey;
}
.info {
position: relative;
height: 100%;
color: #fff;
white-space: normal;
}
The problem I have is that each div has a title, and when it has white-space: normal set and the title is multiple lines, it throws off the alignment of the other divs.
Here is an example of the problem in action: http://jsfiddle.net/ur16gj3m/
Is there a way to get around this? If I change .info to position: absolute, it works. I'd prefer to not use absolute positioning though.
The problem is caused by the default vertical-align: baseline property on inline elements. This causes the blocks to line themselves up with the baseline of the text. This is a problem when the text wraps as the baseline is pushed down.
Set vertical-align: top on .item
Working Example
.slider {
white-space: nowrap;
overflow: auto;
}
.item {
display: inline-block;
position: relative;
width: 200px;
height: 150px;
margin: 10px;
background: grey;
vertical-align: top;
}
.info {
position: relative;
height: 100%;
color: #fff;
white-space: normal;
}
<div class="slider">
<div class="item">
<div class="info">
<h1>Title</h1>
</div>
</div>
<div class="item">
<div class="info">
<h1>This is a really long title</h1>
</div>
</div>
<div class="item">
<div class="info">
<h1>Title</h1>
</div>
</div>
</div>