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>
Related
I have a something like this:
<div class="container">
<div class="element">
My super text <span>something</span>
<div>Hello world</div>
anything.
<div>This is long</div>
</div>
</div>
With the following style:
.container {
display: block;
background-color: red;
width: 50px;
}
.element {
font-family: monospace;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
Is there a way to display HTML elements inline but with an ellipse if the size of the child is bigger than the size of its container?
If I put only text instead of HTML it works fine but with HTML it doesn't.
I tried to put a display: flex on the element class but the dots are not shown and some html element like button are cut in the middle.
Code can be tested on https://stackblitz.com/edit/js-ow7cqb
You can simply add element style to child element (div or etc)
like this :
.element, .element div {
font-family: monospace;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
https://stackblitz.com/edit/js-kahxsq?file=style.css
The solution is to add inline style to the child element.
.container {
display: block;
background-color: red;
width: 50px;
}
.element {
font-family: monospace;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.element div {
display: inline;
}
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 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
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
I want to have address and number in same line. For example in 400px parent div. But if address + number exceed 400px length I want to add ellipsis for address and show number without crop.
My code is here, but I did only fixed width for number. I want auto width for this number to not make much space between address and number if number is too short.
<div class="container">
<table>
<tr>
<td class="ellipsis">LongLongLongLongLongLongLongLongLongLongLongWord</td>
<td style="width:35px;">1234</td>
</tr>
</table>
</div>
div.container {
width:400px;
border:dashed 1px;
overflow:hidden;
}
table {
table-layout: fixed;
width: 100%
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
Visit http://jsfiddle.net/ArfUA/3/
To accomplish this you set float:right to the element which you always want to be visible and you
set display:block to the other element with the ellipsis.
FIDDLE
Markup
<div class="container">
<span class="short">1234</span>
<span class="long ellipsis">LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord</span>
</div>
CSS
.container {
width:400px;
border:dashed 1px;
overflow:hidden;
}
.short {
float: right;
background: yellow; /*just for demo; */
}
.long
{
display: block;
background: pink; /*just for demo; */
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
html
<div class="container">
<div class="ellipsis addname">LongLongLongLoLongLongLongLoLongLongLongLoLongLongLongLoLongLongLongLo</div>
<div class="addnum">1234</div>
</div>
css
div.container {
width:400px;
border:dashed 1px;
overflow:hidden;
}
table {
table-layout: fixed;
width: 100%
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
.addname{
max-width:90%;
}
.addnum{
max-width:10%;
/*margin-left:-2px;*/
}
.addname,.addnum{
float:left;
}
.container{
padding-left:4px;
padding-right:4px;
}
http://jsfiddle.net/ArfUA/5/
It looks like the content contained in the mark-up is not tabular data. Fix this by using DIVs instead and then have the CSS apply:
Markup:
<div class="container">
<div class="column address">[long text]
</div>
<div class="column text">[short text]
</div>
</div>
CSS:
.container {
height: auto;
overflow: hidden; /* clears floats */
width: 400px
}
.column {
display: inline-block;
max-height: 400px;
overflow: hidden;
text-overflow: ellipsis
}
.text {
width: 35px
}
Now, w/ the different columns can be differentiated using the second css class.