The CSS text-overflow: ellipsis property is used to truncate text and display an ellipsis at the end of the text when it overflows its container. However, there may be cases where you want to avoid using this property. Fortunately, there are several approaches you can take to achieve this.
Approach 1: Using a Responsive Layout: One approach to avoiding the use of text-overflow: ellipsis is to use a responsive layout for your web page. This can help ensure that your text never overflows its container in the first place. You can achieve this by using CSS media queries to adjust the layout of your web page based on the size of the screen.
Example: In this example, we will make a responsive layout.
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >
Document
</ title >
< style >
body {
text-align: center;
}
h1 {
color: green;
}
.container {
width: 100%;
}
.text {
font-size: 2em;
}
@media only screen and (max-width: 768px) {
.text {
font-size: 1em;
}
}
</ style >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< b >How to avoid CSS text-overflow: ellipsis?</ b >
< div class = "container" >
< p class = "text" >
This is a long text that may
overflow its container.
</ p >
</ div >
</ body >
</ html >
|
Output:
Approach 2: Using Flexbox: Another approach to avoiding the use of text-overflow: ellipsis is to use CSS Flexbox to create a flexible layout. This can help ensure that your text adjusts to fit its container without overflowing. You can achieve this by setting the display property of the container to flex and using the appropriate flexbox properties to position the text within the container.
Example: Using Flexbox:
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >Document</ title >
< style >
body {
text-align: center;
}
h1 {
color: green;
}
.container {
display: flex;
align-items: center;
justify-content: center;
border: 2px solid pink;
}
.text {
flex: 1;
text-align: center;
}
</ style >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< b >
How to avoid CSS text-overflow: ellipsis?
</ b >
< div class = "container" >
< p class = "text" >
This is a long text that may
overflow its container.
</ p >
</ div >
</ body >
</ html >
|
Output:
Approach 3: Adjust Font Size: You can also try adjusting the font size of your text to ensure that it fits within its container without overflowing. However, be careful not to make the font size too small, as this can make the text difficult to read.
Example: In this example, we will adjust the font size for avoiding tex-overflow.
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >
Document
</ title >
< style >
body {
text-align: center;
}
h1 {
color: green;
}
.container {
border: 2px solid red;
overflow: hidden;
margin-top: 20px;
}
.text {
font-size: 18px;
line-height: 1.5;
}
@media (max-width: 600px) {
.text {
font-size: 25px;
}
}
@media (max-width: 400px) {
.text {
font-size: 42px;
}
}
</ style >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< b >
How to avoid CSS text-overflow: ellipsis?
</ b >
< div class = "container" >
< p class = "text" >
This is a long text that may
overflow its container.
</ p >
</ div >
</ body >
</ html >
|
Output:
Approach 4: Using a Scrollable Container: If you have a large amount of text that needs to be displayed, you can consider using a scrollable container to display it. This can help ensure that all the text is visible without truncating it. You can achieve this by setting the overflow property of the container to scroll or auto.
Example: In this example, we will create a scrollable container
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" >
< style >
body {
text-align: center;
}
h1 {
color: green;
}
.container {
margin: 20px;
width: 400px;
height: 200px;
border: 1px solid #ccc;
overflow: scroll;
}
.container::-webkit-scrollbar {
width: 10px;
}
.container::-webkit-scrollbar-track {
background: #f1f1f1;
}
.container::-webkit-scrollbar-thumb {
background: #888;
}
.text {
font-size: 18px;
line-height: 1.5;
padding: 10px;
}
</ style >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< b >How to avoid CSS text-overflow: ellipsis?</ b >
< center >
< div class = "container" >
< p class = "text" >
This CSS tutorial, whether you’re a
student or a professional, this
tutorial is a valuable resource to
enhance the visual appeal of your
websites or personal blogs. It covers
all the basic and advanced concepts
of CSS, such as properties, selectors,
functions, media queries and more.
CSS is used to enhance the visual
presentation of web pages. Without
the use of CSS, a web page will appear
visually unappealing. Styling is
an essential property for any website.
It increases the standards and overall
look of the website that makes it
easier for the user to interact with
it. A website can be made without CSS,
as styling is MUST since no user would
want to interact with a dull and shabby
website. So for knowing Web Development,
learning CSS is mandatory.
</ p >
</ div >
</ center >
</ body >
</ html >
|
Output: