I have a something like this:
<div class="container">
<div class="element">
My super text <span>something</span>
<div>Hello world</div>
anything.
<div>This is long</div>
</div>
</div>
With the following style:
.container {
display: block;
background-color: red;
width: 50px;
}
.element {
font-family: monospace;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
Is there a way to display HTML elements inline but with an ellipse if the size of the child is bigger than the size of its container?
If I put only text instead of HTML it works fine but with HTML it doesn't.
I tried to put a display: flex on the element class but the dots are not shown and some html element like button are cut in the middle.
Code can be tested on https://stackblitz.com/edit/js-ow7cqb
You can simply add element style to child element (div or etc)
like this :
.element, .element div {
font-family: monospace;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
https://stackblitz.com/edit/js-kahxsq?file=style.css
The solution is to add inline style to the child element.
.container {
display: block;
background-color: red;
width: 50px;
}
.element {
font-family: monospace;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.element div {
display: inline;
}
Related
Why the ellipsis does not show when a header tag is overflown? How can I show the ellipsis for header tags?
div {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div>
<h4>Ellipsis does not work with header tags</h4>
<span>Ellipsis does work with span tags</span>
</div>
Try adding
h4 {
display: inline;
}
and you'll see it works as expected
div {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
h4 {
display: inline;
}
<div>
<h4>Ellipsis does not work with header tags</h4> <br>
<span>Ellipsis does work with span tags</span>
</div>
That is because the text-overflow: ellipsis only applies to direct descendant text-nodes. You should therefore also apply the same style to the h4 selector as well, to achieve the same effect.
I would not recommend setting h4 to display: inline, because that means that you will have to manually insert breaking space after it.
div {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
h4 {
overflow: hidden;
text-overflow: ellipsis;
}
<div>
<h4>Ellipsis does not work with header tags</h4>
<span>Ellipsis does work with span tags</span>
</div>
Unlike span, h4 is a block level element so text-overflow need to be applied to it to work. Same for overflow:.
This property specifies rendering when inline content overflows its end line box edge in the inline progression direction of its block container element ("the block") that has overflow other than visible. ref
div {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
h4 {
text-overflow: inherit;
overflow: inherit;
/* no need to inherit white-space because it inherited by default */
}
<div>
<h4>Ellipsis does not work with header tags</h4>
<span>Ellipsis does work with span tags</span>
</div>
h4 is a block element, so assign text-overflow on that element like this not in div.
h4, span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width:100%;
display:inline-block;
}
div {
width: 200px;
}
<div>
<h4>Ellipsis does not work with header tags</h4>
<span>Ellipsis does work with span tags</span>
</div>
I have a div that is 100px wide. It is set to overflow-x:hidden.
I would expect this to accomplish what I want, keeping the text from dropping down if it exceeds the length of the container, and instead overflow the container and be invisible.
.user_name {
width: 100px;
overflow-x: hidden;
}
<div class='user_name'>This is a test</div>
The text will just drop down instead of overflowing the right of the container and being invisible. How can I achieve what I am after?
Add white-space: nowrap to your rules.
.user_name {
width: 100px;
overflow-x: hidden;
white-space: nowrap;
}
<div class='user_name'>This is a test This is a test</div>
Use white-space: nowrap; on the div to restrict it to only one line.
.user_name {
width: 50px;
overflow-x: hidden;
white-space: nowrap;
}
<div class='user_name'>This is a test</div>
Use white-space:nowrap to avoid wrapping of text
.user_name {
width: 100px;
overflow-x: hidden;
white-space: nowrap;
}
Codpen- https://codepen.io/nagasai/pen/JNOBRb
#div1 {
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: clip;
border: 1px solid #000000;}
<div id="div1">This is some long text that will not fit in the box</div>
I have the following container of text:
<div class="cardTitles">
<div class="title">
<div class="titleContent">
<i class="fa fa-star-o"></i>
<b>Some long long long title here</b>
</div>
</div>
... title divs ...
</div>
css:
.cardTitles {
width: 100%;
height: 100%;
}
.title
{
position: relative;
padding-top: 8px;
padding-bottom: 8px;
}
I want to make text full width + text-overflow: ellipsis. So when I resize browser all title divs should be full 100% width of the parent cardTitles with cut text to three dots at the end.
I found that this is possible using flex. Here is the possible answer:
.parent-div {
display: flex;
}
.text-div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
But this doesn't work for me. Parent container stops resizing when it reach the max length of some child title.
You can find an example here: http://88.198.106.150/tips/cpp/
Try to resize browser and look at title with text: What does it mean that a reference must refer to an object, not a dereferenced NULL pointer. I need to make it overflow ellipsis.
Try this out:
.titleContent {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Here's and updated jsFiddle
No Flex but could work also ... try it.
.element {
display: table;
table-layout: fixed;
width: 100%;
}
.truncate {
display: table-cell;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
text-overflow ellipsis with 100% width
The width needs to be added in pixels, percentage wont work along with other three properties as given below:-
.text-ellipsis{
max-width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#div1 {
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: clip;
border: 1px solid #000000;
}
#div2 {
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}
The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.
This div uses "text-overflow:clip":
This is some long text that will not fit in the box
This div uses "text-overflow:ellipsis":
This is some long text that will not fit in the box
I want to have address and number in same line. For example in 400px parent div. But if address + number exceed 400px length I want to add ellipsis for address and show number without crop.
My code is here, but I did only fixed width for number. I want auto width for this number to not make much space between address and number if number is too short.
<div class="container">
<table>
<tr>
<td class="ellipsis">LongLongLongLongLongLongLongLongLongLongLongWord</td>
<td style="width:35px;">1234</td>
</tr>
</table>
</div>
div.container {
width:400px;
border:dashed 1px;
overflow:hidden;
}
table {
table-layout: fixed;
width: 100%
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
Visit http://jsfiddle.net/ArfUA/3/
To accomplish this you set float:right to the element which you always want to be visible and you
set display:block to the other element with the ellipsis.
FIDDLE
Markup
<div class="container">
<span class="short">1234</span>
<span class="long ellipsis">LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord</span>
</div>
CSS
.container {
width:400px;
border:dashed 1px;
overflow:hidden;
}
.short {
float: right;
background: yellow; /*just for demo; */
}
.long
{
display: block;
background: pink; /*just for demo; */
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
html
<div class="container">
<div class="ellipsis addname">LongLongLongLoLongLongLongLoLongLongLongLoLongLongLongLoLongLongLongLo</div>
<div class="addnum">1234</div>
</div>
css
div.container {
width:400px;
border:dashed 1px;
overflow:hidden;
}
table {
table-layout: fixed;
width: 100%
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
.addname{
max-width:90%;
}
.addnum{
max-width:10%;
/*margin-left:-2px;*/
}
.addname,.addnum{
float:left;
}
.container{
padding-left:4px;
padding-right:4px;
}
http://jsfiddle.net/ArfUA/5/
It looks like the content contained in the mark-up is not tabular data. Fix this by using DIVs instead and then have the CSS apply:
Markup:
<div class="container">
<div class="column address">[long text]
</div>
<div class="column text">[short text]
</div>
</div>
CSS:
.container {
height: auto;
overflow: hidden; /* clears floats */
width: 400px
}
.column {
display: inline-block;
max-height: 400px;
overflow: hidden;
text-overflow: ellipsis
}
.text {
width: 35px
}
Now, w/ the different columns can be differentiated using the second css class.
Let's say I have a string "I like big butts and I cannot lie" and I cut it with overflow:hidden, so it displays something like this:
I like big butts and I cann
cutting off the text. Is it possible to display this like this:
I like big butts and I cann...
using CSS?
You can use text-overflow: ellipsis; which according to caniuse is supported by all the major browsers.
Here's a demo on jsbin.
.cut-text {
text-overflow: ellipsis;
overflow: hidden;
width: 160px;
height: 1.2em;
white-space: nowrap;
}
<div class="cut-text">
I like big butts and I can not lie.
</div>
Check the following snippet for your problem
div{
width : 100px;
overflow:hidden;
display:inline-block;
text-overflow: ellipsis;
white-space: nowrap;
}
<div>
The Alsos Mission was an Allied unit formed to investigate Axis scientific developments, especially nuclear, chemical and biological weapons, as part of the Manhattan Project during World War II. Colonel Boris Pash, a former Manhattan P
</div>
Try this if you want to restrict the lines up to 3 and after three lines the dots will appear. If we want to increase the lines just change the -webkit-line-clamp value and give the width for div size.
div {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
Hopefully it's helpful for you:
.text-with-dots {
display: block;
max-width: 98%;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}
<div class='text-with-dots'>Some texts here Some texts here Some texts here Some texts here Some texts here Some texts here </div>
Hide text on load and show on hover
.hide-text {
width: 70px;
display: inline-block;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}
span:hover {
white-space: unset;
text-overflow: unset;
}
<span class="hide-text"> How to hide text by dots and show text on hover</span>
Yes, via the text-overflow property in CSS 3. Caveat: it is not universally supported yet in browsers.
In bootstrap 4, you can add a .text-truncate class to truncate the text with an ellipsis.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 190px;">
I like big butts and I cannot lie
</span>
<!DOCTYPE html>
<html>
<head>
<style>
.cardDetaileclips{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; /* after 3 line show ... */
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div style="width:100px;">
<div class="cardDetaileclips">
My Name is Manoj and pleasure to help you.
</div>
</div>
</body>
</html>
<style>
.dots
{
display: inline-block;
width: 325px;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}
.dot
{
display: inline-block;
width: 185px;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}
</style>
Most of solutions use static width here. But it can be sometimes wrong for some reasons.
Example: I had table with many columns. Most of them are narrow (static width). But the main column should be as wide as possible (depends on screen size).
HTML:
<table style="width: 100%">
<tr>
<td style="width: 60px;">narrow</td>
<td>
<span class="cutwrap" data-cutwrap="dynamic column can have really long text which can be wrapped on two rows, but we just need not wrapped texts using as much space as possible">
dynamic column can have really long text which can be wrapped on two rows
but we just need not wrapped texts using as much space as possible
</span>
</td>
</tr>
</table>
CSS:
.cutwrap {
position: relative;
overflow: hidden;
display: block;
width: 100%;
height: 18px;
white-space: normal;
color: transparent !important;
}
.cutwrap::selection {
color: transparent !important;
}
.cutwrap:before {
content: attr(data-cutwrap);
position: absolute;
left: 0;
right: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #333;
}
/* different styles for links */
a.cutwrap:before {
text-decoration: underline;
color: #05c;
}
.cut-text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}