text-overflow ellipsis without white-space: nowrap?
There is no way to do this using pure CSS. It's monstrous and sad. I've often desired this myself when you want the browser to "ellipsify" a multi-line text with possibly overflowing text whenever it spills out of the container.
Is it possible to have text-overflow: ellipsis without white-space: nowrap?
Unfortunately the behavior you are seeing is correct for text-overflow: ellipsis
.
Cross-browser support for hyphenated text is not a reality yet with CSS only, but you can see a good roundup of what's possible here:
http://code.google.com/p/hyphenator/wiki/en_CSS3Hyphenation
Some browser-specific CSS is available for firefox and webkit browsers:
-webkit-hyphens: auto;
-webkit-hyphenate-character: '~';
-moz-hyphens: auto;
The big issue with hyphenation is that it needs to be language aware to work properly, which is tricky.
Maybe a JS solution like this will help you?
http://code.google.com/p/hyphenator/
textwrap with ellipsis and nowrap white-space
Just use text-overflow: ellipsis
along with white-space: nowrap
.
Updated Example
.testWrap {
width: 125px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
HTML ellipsis without specifying the particular width
Just add display: flex
to the div container:
div { display: flex; /* new */ width: 200px; white-space: nowrap; border: 1px solid red; margin-top: 10px;}
span { overflow: hidden; text-overflow: ellipsis;}
b { padding-left: 10px;}
<div> <span>test</span> <b>12345</b></div>
<div> <span>test test test test test test test test test test test</span> <b>50</b></div>
Text overflow ellipsis on two lines
I'm not sure if you have seen this article, but Chris Coyier's excellent CSS-Tricks.com posted a link to this a while back and it's a pure CSS solution that accomplishes exactly what you seek.
(Click to View on CodePen)
html,
body,
p {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.ellipsis {
overflow: hidden;
height: 200px;
line-height: 25px;
margin: 20px;
border: 5px solid #AAA;
}
.ellipsis:before {
content: "";
float: left;
width: 5px;
height: 200px;
}
.ellipsis>*:first-child {
float: right;
width: 100%;
margin-left: -5px;
}
.ellipsis:after {
content: "\02026";
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
float: right;
position: relative;
top: -25px;
left: 100%;
width: 3em;
margin-left: -3em;
padding-right: 5px;
text-align: right;
background-size: 100% 100%;
/* 512x1 image,gradient for IE9. Transparent at 0% -> white at 50% -> white at 100%.*/
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9+ggOZxrBtpRRo94gxItwLOoX/vsHdA2yGgL8+TdKUK8VFufmHSGgAQWJNc9tk+rb5KMCA8aM0iwpWV6dwP9+fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG+IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZplydZpZpbJOQco2KdYeEe36BDAL8/vgHBfr2CvTyDu8R7esU6RcZ5ecc4+Af3iLcJSjZ1ivT0S/PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2+F/nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl+4yrDsYoVx+JYz7mXXNSp/a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO+2ZdD9MFe56Y9z3LUG96mcX02n/CW71JH6Qmf8px/cw77ZvVzB+BCj8D5vxhn/vXZh6D4uzf1rN+Cc347j79q/zUL25TPrJMfG/5LvuNZP8rixeZz/mf+vU+Vut+5NL5gPOeb/sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8/qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv+j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC);
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}
<div class="ellipsis">
<div>
<p>
Call me Ishmael. Some years ago – never mind how long precisely – having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of
driving off the spleen, and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing
up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off –
then, I account it high time to get to sea as soon as I can.
</p>
</div>
</div>
CSS text-overflow: ellipsis; not working?
text-overflow:ellipsis;
only works when the following are true:
- The element's width must be constrained in
px
(pixels). Width in%
(percentage) won't work. - The element must have
overflow:hidden
andwhite-space:nowrap
set.
The reason you're having problems here is because the width
of your a
element isn't constrained. You do have a width
setting, but because the element is set to display:inline
(i.e. the default) it is ignoring it, and nothing else is constraining its width either.
You can fix this by doing one of the following:
- Set the element to
display:inline-block
ordisplay:block
(probably the former, but depends on your layout needs). - Set one of its container elements to
display:block
and give that element a fixedwidth
ormax-width
. - Set the element to
float:left
orfloat:right
(probably the former, but again, either should have the same effect as far as the ellipsis is concerned).
I'd suggest display:inline-block
, since this will have the minimum collateral impact on your layout; it works very much like the display:inline
that it's using currently as far as the layout is concerned, but feel free to experiment with the other points as well; I've tried to give as much info as possible to help you understand how these things interact together; a large part of understanding CSS is about understanding how various styles work together.
Here's a snippet with your code, with a display:inline-block
added, to show how close you were.
.app a { height: 18px; width: 140px; padding: 0; overflow: hidden; position: relative; display: inline-block; margin: 0 5px 0 5px; text-align: center; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; color: #000;}
<div class="app"> <a href="">Test Test Test Test Test Test</a></div>
make middle span with ellipsis without breaking icon and right number
As long as you are using inline-flex
, the 100%
width should work perfectly for achieving what you need:
.text {
width: 100%;
padding-left: 5px;
}
.right {
width: 10%; /* remove it */
}
.right { float: right; padding: 0 8px;}
.menu { width: 155px; border-right: 1px solid #ccc; list-style-type: none;}
body { font-family: "Segoe UI", "Open Sans", Helvetica, Arial, sans-serif;}a { text-decoration: none} .p { width: 155px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; } .text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; padding-left: 5px; padding-right: 16px; } .right { /*width: 10%;*/ }
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/><ul class="menu"> <li class="" data-action="switchFolder" data-sign-in="false" id="inbox"> <a href="javascript:void(0);"> <div class="p"> <i class="icon ion-ios-filing-outline"></i> <span class="text">This is a very long element that wil exceed limit</span> <span class="right">429</span> </div> </a> </li> </ul>
text-overflow: ellipsis not working
You need to have CSS overflow
, width
(or max-width
), display
, and white-space
.
http://jsfiddle.net/HerrSerker/kaJ3L/1/
span {
border: solid 2px blue;
white-space: nowrap;
text-overflow: ellipsis;
width: 100px;
display: block;
overflow: hidden
}
body {
overflow: hidden;
}
span {
border: solid 2px blue;
white-space: nowrap;
text-overflow: ellipsis;
width: 100px;
display: block;
overflow: hidden
}
<span>Test test test test test test</span>
Related Topics
Set Color for Extra Page Parts Visible During Rubber Band Scroll
Preload CSS File Not Supported on Firefox and Safari MAC
Getting Inline-Block Element's Height to Fill the Parent
Positioning Svg Elements Using CSS
How to Detect Ie and Edge Browsers in CSS
Change Justify-Content Value When Flex Items Overflow Container
Wrapping Text Around a Div with CSS
Segoe Ui' Font with Font-Face & Local
How to Set the CSS Content Property with a Google Material Icon
Bootstrap - Some Kind of Margin on Mobile Devices (Only Right Side)
How to Give a Font Awesome Icon a Background Color
Responsive Web Design and High Resolution Displays (iPhone 4/5)
CSS Text-Indent Equivalent on the Right Side
Remove 1Px Transparent Space from CSS Box-Shadow in Ie11
Body Set to Overflow-Y:Hidden But Page Is Still Scrollable in Chrome