On css: if text line is break show dots
Are you talking about an ellipsis? Add this to your CSS
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
Fiddle: http://jsfiddle.net/5UPRU/7/
Show dots on the nth line of a text if it breaks with CSS
Solution 1:
Use the webkit only -webkit-line-clamp
property for 2 lines.
.overme {
width: 300px;
height: 60px;
line-height: 30px;
overflow:hidden;
font-size: 30px;
color: red;
background: #333;
/*The problematic part is below*/
white-space:nowrap;
text-overflow: ellipsis;
}
.overme {
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
<div class="overme">
how much wood can a woodchuck chuck if a woodchuck could chuck wood?
</div>
Is it possible to show dots '...' instead of letting text continue after the end of div?
Below properties are useful when you want to show ellipsis at the end of single line.
div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Since you are looking for multi line ellipsis (which is not directly available in CSS), I think below link might help you :
https://codepen.io/martinwolf/pen/qlFdp
There is also one Jquery plugin available which can be used :
https://tpgblog.com/threedots/
How can I show dots ( ... ) in a span with hidden overflow?
For this you can use text-overflow: ellipsis;
property. Write like this
span {
display: inline-block;
width: 180px;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}
<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span>
css how to wrap text with dots
<!DOCTYPE html>
<html>
<head>
<style>
.wrap-line-content {
word-wrap: break-word; /* important */
}
</style>
</head>
<body>
<p class="wrap-line-content">......................................</p>
</body>
</html>
Place text after dots inline with the second line of text overflow ellipsis
In the future you will be able to do this with only one line of code using:
line-clamp: 2 "...123 T.";
You can find more detail in the specification:
The line-clamp property is a shorthand for the
max-lines
,block-ellipsis
, andcontinue
properties.It allows limiting the contents of a block container to the specified number of lines; remaining content is fragmented away and neither rendered nor measured. Optionally, it also allows inserting content into the last line box to indicate the continuity of truncated/interrupted content.
Until then, here is a very hacky idea to achieve the result:
.container {
max-width: 200px;
margin: 5px;
}
.main-text {
line-height: 1.2em; /* the height of a line */
max-height: calc(2 * 1.2em); /* restrict the height to 2 lines*/
overflow: hidden;
display: inline-block;
position: relative;
}
.main-text:after {
content: "123 T.";
display:inline-block;
width:40px;
position:relative;
z-index:999;
/* a big box-shadow to hide the span element used for the ellipsis */
box-shadow:
40px 0 0 #fff,
80px 0 0 #fff,
120px 0 0 #fff,
160px 0 0 #fff;
/**/
color: #8e8f8f;
font-size: 10px;
background: #fff; /* white background to cover the text behind */
margin-left:2px;
}
/* this will replace the ellipsis */
.main-text span {
position: absolute;
/* position at the bottom right */
top: 1.2em; /* height of one line */
right: 0;
padding: 0 3px;
background: #fff; /* white background to cover the text behind */
}
.main-text span:before {
content: "..."; /* the dots*/
}
/* the text after the dots */
.main-text span:after {
content: "123 T.";
color: #8e8f8f;
font-size: 10px;
<div class="container">
<div class="main-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus mi, dapibus sit amet posuere eu, porttitor condimentum nulla. Donec convallis lorem justo, eget malesuada lorem tempor vitae. Aliquam sollicitudin lacus ipsum, at tincidunt ante condimentum
vitae. <span></span>
</div>
</div>
<div class="container">
<div class="main-text">
Lorem ipsum <span></span>
</div>
</div>
<div class="container">
<div class="main-text">
Lo <span></span>
</div>
</div>
<div class="container">
<div class="main-text">
Lorem ipsum dolor sit ameta, adipiscing elit. Nam metus <span></span>
</div>
</div>
<div class="container">
<div class="main-text">
Lorem ipsum dolor sit ameta, adipiscing elit <span></span>
</div>
</div>
Two line of text and overflow is dotted
Working CSS solution for Chrome, Safari and Opera is:
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
You can change 2 to any number. It will show X number of text and dots at the end
line-clamp
is not supported by all browsers. https://caniuse.com/#search=line-clamp
Related Topics
CSS Variables (Custom Properties) in Pseudo-Element "Content" Property
Reference a Class/Mixin Without Completely Importing the Less File
What Does the Selector [Class^="Span"] Do
Offset Scroll Anchor in HTML with Bootstrap 4 Fixed Navbar
Tailwind CSS Classes Not Showing in Storybook Build
How to Change the Color of the Scrollbar for Microsoft Edge
How to Convert a Numeric Value into a Percentage (Or) Append Percentage Symbol to a Number
How to Check for Duplicate CSS Rules
How to Apply Theme to Jupyter Lab
How to Remove Letter-Spacing for the Last Letter of an Element in CSS
How to Set CSS Width Equal to Length of Longest Text
What Are Cross-Browser, Cross Platfom Web Safe Fonts
How to Use CSS Media Query to Scale Background-Image to Viewing Window