Is it actually possible to use text-overflow: ellipsis, when you don't set the width?
Instead of width I need to set it until 100px from the right. If the text reaches 100px from the right, it will be hidden and with dots in the front.
You should just have to add padding-right: 100px; to the element with text in.
HTML
<p>some text</p>
CSS
p {
text-overflow: ellipsis;
padding-right: 100px;
white-space: nowrap;
overflow: hidden;
}
Here is a JsFiddle with the above code.
You can use both margins: left and right to make it work:
HTML:
<div class="parent">
<div class="test">some pseudo-centered text some pseudo-centered text some pseudo-centered text some pseudo-centered text some pseudo-centered text</div>
</div>
CSS:
.test {
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
margin: 0 100px;
}
A working example online can be seen here: http://jsfiddle.net/rqb3W/1/
text-overflow: ellipsis only works if width or max-width is set in pixels. You can get around this by using width: calc (69%) which gets converted to px.
So to answer your question you can try float:right with a margin or use width: calc(100% - 100px); with margin-right: 100px
Refer: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
Related
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;
}
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 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'm trying to create a table-like-display containing 2 columns using div elements. One column is for an image URL while the other is for the file size. The file size column has a fixed width of 150px and the URL column should fill the remaining space. If there is insufficient space for the URL it should cut off and display an ellipsis. However what happens is the text just continues to the next line. I've also tried setting white-space: nowrap; but that causes the whole div to break onto a new line.
My HTML code look like this.
<div id="container>
<div class="row">
<div class="imageURL">http://mywebsite.com/image1.jpg</div>
<div class="fileSize">586 KB</div>
</div>
<div class="row">
<div class="imageURL">http://mywebsite.com/image2.jpg</div>
<div class="fileSize">785 KB</div>
</div>
<div class="row">
<div class="imageURL">http://mywebsite.com/image3.jpg</div>
<div class="fileSize">258 KB</div>
</div>
</div>
And here is the CSS.
#container {
width: 100%;
}
.row {
padding: 5px;
}
.imageURL {
display: inline;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
}
.fileSize {
display: inline-block;
width: 150px;
float: right;
}
I think you are looking for something more like this in the following JSFIDDLE. I have rearranged your CSS to look like the following:
#container {
width: 100%;
}
.imageURL {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
width:auto;
min-width:100px;
max-width:65%;
white-space:nowrap;
}
.fileSize {
display: inline-block;
margin-left: 100px;
}
.row {
overflow: hidden;
white-space:nowrap;
}
Mainly, I have added the white-space nowrap property along with keeping both divs on the same line, I took out the float, which had made it a block level element, and just placed a margin to be a specific amount from it. The key comes from the width in the .imageURL class, where I added an auto width, a min width, and a max width, which allows the ellipsis to take place at certain points.
Change .imageURL to the following:
.imageURL {
white-space: nowrap;
text-overflow: ellipsis;
width: 400px;
display: block;
overflow: hidden
}
Hope This Helps!;)
JSFiddle Example