Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Display Ellipsis in the <span> Element Having Hidden Overflow?
The <span> element is a generic container with no semantic significance. It's frequently used in web authoring for styling, along with the style and class attributes. It can also be useful to add attributes to isolated text spans, such as lang or title.
It should only be used when no other semantic element is available. The <span> element is similar to the <div> element, but the <div> element is a block-level element, whereas the <span> element is an inline element. Following is the syntax –
<span class="">Some Text</span>
The CSS Shorthand Property
The CSS shorthand property, overflow, specifies the desired behaviour for an element's overflow — that is, when an element's content is too large to fit in its block formatting context — in both directions.
Syntax
element {
overflow: visible | hidden | scroll | auto | inherit;
}
When an element's overflow is set to hidden, the content is clipped to fit the padding box, if necessary. There are no scrollbars, and no support for allowing the user to scroll (via dragging or using a scroll wheel) is allowed. Because the content can be scrolled programmatically (for example, by setting the value of a property like scrollLeft or calling the scrollTo() method), the element remains a scroll container.
The ellipsis is a type of punctuation that indicates a pause or that something has been left out on purpose. It is composed of three dots or periods. It can be used with an element that has a hidden overflow for a clear layout and better truncation.
In this article we will take a look at a method to display ellipsis in a span element that has a hidden overflow.
Using the text-overflow Property
When a string of text overflows the boundaries of a container, it can mess up the entire layout. The text-overflow property specifies how un- displayed overflow content should be signaled to the user. It can be clipped, have an ellipsis (...), or have a custom string displayed.
Text-overflow requires both of the following properties: overflow: hidden and white-space: nowrap.
Following is the syntax
text-overflow: clip|ellipsis|string|initial|inherit;
The ellipsis value of the text overflow value represents the clipped or truncated text with the help of an ellipsis or three dots/periods. It appears within the content area, reducing the amount of text displayed. The ellipsis is clipped if there is insufficient space to display it.
Example
The following example demonstrates the inclusion of ellipsis in the span element with a hidden overflow by setting the value of text-overflow to ellipsis. We set the <span> element's display property to "inline-block." The width specifies the location of the ellipsis. We also use the white-space property in conjunction with the "nowrap" value to prevent content from wrapping to the next line.
<!DOCTYPE html>
<html>
<head>
<title>
How to Display Ellipsis in the span Element Having Hidden Overflow?
</title>
<style>
span {
background-color:peachpuff;
color:darkslategrey;
border:2px solid sienna;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
width:450px;
height:20px;
margin:10px;
padding:2px 3px 4px 5px;
display:inline-block;
}
</style>
</head>
<body>
<h3>Something to think about</h3>
<span>
The minute you think you think you have the right to belittle others because you are better than them is the same minute you have proven that you are worse.
</span>
</body>
</html>
Example
In this particular example, we display the ellipsis in the <span> tag at the end of the second line. It is a variation of the previous example with additional properties like -webkit-line-clamp which allows limiting of the contents of a block container to the specified number of lines and the -webkit-box-orient which decides whether an element lays out its contents horizontally or vertically.
<!DOCTYPE html>
<html>
<head>
<title>
How to Display Ellipsis in the span Element Having Hidden Overflow?
</title>
<style>
span {
display: inline-block;
background-color:lavenderblush;
color:purple;
font-weight:550;
border: 3px solid thistle;
margin:10px;
padding: 2px 3px 4px 5px;
width: 250px;
height: 50px;
-webkit-line-clamp: 2;
display: -webkit-box;
line-height: 1.50;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<h3>Something to think about</h3>
<span>
The minute you think you think you have the right to belittle others because you are better than them is the same minute you have proven that you are worse.
</span>
</body>
</html>
By modifying the -webkit-line-clamp property we can display the ellipsis at any consequent line in the span tag.
191 Views
