I want to short button value using CSS.
Final out put need to like this..
I need help. Thankyou.
Wrap the button text in a <span>, which has properties to control text overflow and linebreaks.
Have a look at this jsfiddle: http://jsfiddle.net/5hEPZ/
<button>
<span class=buttontext>Very long text Very long text Very long text</span>
</button>
And then the css:
.buttontext {
width: 95px;
overflow: hidden;
white-space: nowrap;
display: block;
text-overflow: ellipsis;
}
You can use text-overflow: ellipsis; for truncating the text in the button.
.truncate {
padding: 10px;
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<button class="truncate">very long textvery long text very long text very long text</button>
Related
I want my button value to be Entrepreneurship. Hence, it may not be wrapped in the fixed width button. so What I want is, I want my button value to be Entrepreneu… instead of cutting the extra text in button.
Here is the image.
You should be using these style and you will get an ellipsis:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
example below:
.truncate {
width: 75px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<button class="truncate">Entrepreneurship</button>
I have the following situation:
But what I want to do is align right of my container, and if text overflows his container, show ellipsis, instead of now which the alignment is from left.
My expectation:
AAA
BBBBBBBBBBBBBB...
CCC
And in cases where the first or third line contains more characters:
AAAAAAAAAAAAAA...
BBBBBBBBBBBBBB...
CCC
You can do this:
CSS
.box {
display: inline-block;
}
p {
width: 80px;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: right;
}
HTML
<div class="box">
<p>AAAAAAAAAAAAAA</p>
<p>BBBBBBBBBBBBBB</p>
<p>CCC</p>
</div>
DEMO HERE
Using pure CSS, add these attriutes:
text-align:right;
overflow: hidden;
text-overflow: ellipsis;
text-align:right; aligns your text to the right.
overflow: hidden; plus text-overflow: ellipsis; will make text overflow and be replaced by an ellipsis.
Working example
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>
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;