I have < p > tag and text there.
Css:
p {
max-height: 250px;
}
I want to make my text hide last word which can't fit in 250px of height and change it to "...".
I have tried it:
p {
white-space: nowrap;
overflow: hidden;
text-overflow: hidden;
}
It worked but not as I want. It hide word which can't fit in the first line, but not the the 250px of height. Is there anyway to do so? Thanx in advance.
You need to use the overflow-y property to hide the y-axis.
More about overflow-y.
CSS
p {
max-height: 250px;
width: 100px;
white-space: nowrap;
overflow-y: hidden;
}
HTML
<p>Some text goes here</p>
Try this it will help sure
p{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-height: 250px;
width: 150px;
}
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>
I want to keep the header in single line, as described below:
h2 {
overflow: hidden;
}
<h2>
I want to keep the text of this header in single-line... the extra characters should be hidden
</h2>
You need a width and white-space:nowrap; for that:
h1 {
white-space: nowrap;
width: 100%;
overflow: hidden;
}
<h1>This text is long. Way too long to be shown in one line. It even is that long</h1>
h2 {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<h2>
I want to keep the text of this header in single-line... the extra characters should be hidden
</h2>
you can fix what width you want to hide the content behind
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 have the following:
Fiddle link
html:
<button>Here's a long chunk of text</button>
css:
button {
width: 80px;
overflow: hidden;
}
Basically, I want the button not to wrap the text..
I'm sure I'm just missing something obvious, but I can't figure it out...
Add the following style to prevent line breaks:
{
white-space: nowrap;
}
Updated Fiddle
EDIT
Now, since you're trying to hide the overflow, I'd suggest to use text-overflow: ellipsis; to give better looks to the text cut, adding a (...) at the end:
Another Updated Fiddle
button {
width: 80px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
<button>Here's a long chunk of text</button>
You can use white-space: nowrap;:
button {
width: 80px;
overflow: hidden;
white-space: nowrap;
}
<button>Here's a long chunk of text</button>
Add white-space:nowrap;
button {
width: 80px;
overflow: hidden;
white-space:nowrap;
}
jsFiddle example
add white-space: nowrap; and word-wrap: normal;
word-wrap: The word-wrap property allows long words to be able to be broken and wrap onto the next line.
white-space: The white-space property specifies how white-space inside an element is handled.
button {
width: 80px;
overflow: hidden;
white-space: nowrap;
word-wrap: normal;
}
<button>Here's a long chunk of text</button>