I'm trying to make my text fit the height of this card and hidden the overflow using ellipsis, as you can see if I use white-space: no wrap, it works but makes my block of text one line. If I use "normal" I get my block back but the ellipsis is gone... How can I achieve this?
<vx-card >
<template slot="actions">
<span class="text-grey">{{Time | moment("MM/D/YYYY, h:mm:ss a")}}
</span>
</template>
<p class="myoverflow" >{{PostContent}}</p>
<div slot="footer">
<vs-row vs-justify="flex-end">
<vs-button color="primary" type="gradient" >View</vs-button>
<vs-button color="danger" type="gradient" >Delete</vs-button>
</vs-row>
</div>
</vx-card>
css:
.myoverflow{
text-overflow: ellipsis;
height: 100px;
width: 100%;
display: inline-block;
white-space: nowrap;
overflow: hidden;
}
.myoverflow{
text-overflow: ellipsis;
height: 100px;
width: 100%;
display: block;
white-space: normal;
overflow: hidden;
}
this should fix your problem:
.myoverflow{
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
jsfiddle attached:
https://jsfiddle.net/3d6fhrcL/
Related
We have the following configuration for long text ellipsis (...):
.text-ellipsis {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
}
But this feature doesn't seem to work properly, i.e. long text doesn't become shorter with appropriate ending '...'
What can be fixed here?
You can try to set some width to the element. You can apply width either in px or in %.
.text-ellipsis {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
width: 150px;
}
<div>
<p class="text-ellipsis">Hello Stackoverlow Users</p>
</div>
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 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 would like to cut off some long text using an ellipsis.
However, with my current implementation, it doesn't include extra words that would cause it to go beyond the div and does not show ellipsis to indicate that the text is cut off.
What am I doing wrong?
http://jsfiddle.net/sw6Sp/6/
<div class="testWrap">This is some very long text that I want to cut off </div>
.testWrap{
max-width: 125px;
height:15px;
overflow: hidden;
text-overflow:ellipsis;
border: 1px solid black;
}
Just use text-overflow: ellipsis along with white-space: nowrap.
Updated Example
.testWrap {
width: 125px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Adding the css-rule white-space: nowrap; should solve your problem.
<div class="testWrap" style="
max-width: 125px;
height:15px;
overflow: hidden;
text-overflow:ellipsis;
border: 1px solid black;
white-space: nowrap;
">This is some very long text that I want to cut off </div>
If you want to use ellipsis without white-space: nowrap, use these CSS rules
white-space: pre-line;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
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;
}