I am trying to add ellipsis whenever text is overflowing, for some reason it wont show. What am I doing wrong?
.test {
width: 100px;
overflow: hidden;
white-space: nowrap;
}
.text {
text-overflow: ellipsis;
}
<div class="test">
<div class="text">
dwada wad kowda dwak waodk
</div>
</div>
The properties that make ellipsis appear need to be in the element you want them to show
.test {
width: 100px;
}
.text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
<div class="test">
<div class="text">
dwada wad kowda dwak waodk
</div>
</div>
Related
Essentially, I am trying to remove/prevent the extra horizontal width created when a horizontal row of block elements has any of the block elements wrapped. That is, I want the width of the div containing the overflow elements to be just the size of the nonwrapped elements.
The following code can be used to see the issue in question:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="example.css">
</head>
<body>
<div class="card">
<div class="card-content">
<div>
<div class="row">
<p class="note-title">This is a relatively lengthy example title for example purposes.</p>
<div>
<div class="row">
<div class="note-tags-list">
<p id="blank-tag">.</p>
<p class="tag note-tag">crunchy</p>
<p class="tag note-tag">recipe</p>
<p class="tag note-tag">carrot</p>
</div>
<p id="text-that-should-stay">I stay</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
/* example.css */
#import "https://cdn.jsdelivr.net/npm/bulma#0.9.3/css/bulma.min.css";
#text-that-should-stay {
white-space: nowrap;
color: white;
}
#blank-tag {
width: 30px;
min-width: 30px;
}
.note-title {
white-space: nowrap;
color: white;
overflow: hidden;
text-overflow: ellipsis;
}
.card {
background-color: black;
}
.row {
display: flex;
justify-content: space-between;
}
.note-tag {
width: 175px;
min-width: 0px;
}
.note-tags-list {
display: flex;
flex-flow: row wrap;
overflow: hidden;
height: 24px;
justify-content: flex-end;
}
For ease, the code above can be seen in the following JSFiddle, though running the above code locally will produce the same result: https://jsfiddle.net/5L7u2gkp/1/.
Here is a gif that shows the issue and then what would be ideal visually:
SECOND EDIT
I might not get you right, but there is no extra width when you remove the blank tag.
If you are talking about the gap between node-title and note-tags-list, it derives from flex-grow: 0;, which is the default for flex items. You can add to .tag the flex-grow property as flex-grow: 1; and it will make your tags grow to the maximum space they can get.
#import "https://cdn.jsdelivr.net/npm/bulma#0.9.3/css/bulma.min.css";
#text-that-should-stay {
white-space: nowrap;
color: white;
}
.note-title {
white-space: nowrap;
color: white;
overflow: hidden;
text-overflow: ellipsis;
}
.card {
background-color: black;
}
.row {
display: flex;
justify-content: space-between;
}
.note-tag {
width: 175px;
min-width: 0px;
flex-grow: 1;
}
.note-tags-list {
display: flex;
flex-flow: row wrap;
white-space: nowrap;
overflow: hidden;
height: 24px;
justify-content: flex-end;
}
<div class="card">
<div class="card-content">
<div>
<div class="row">
<p class="note-title">This is a relatively lengthy example title for example purposes.</p>
<div>
<div class="row">
<div class="note-tags-list">
<p class="tag note-tag">crunchy</p>
<p class="tag note-tag">recipe</p>
<p class="tag note-tag">carrot</p>
</div>
<p id="text-that-should-stay">I stay</p>
</div>
</div>
</div>
</div>
</div>
</div>
EDIT - based on your comments
so actually, the excess width is coming from the `#blank-tag`. You set its width to `30px`. If you remove it / change its width to 0, it will solve your problem. Otherwise, there will always be a 30px gap.
the
"pink" width
It is not related to the width of your elements; it's how chrome devtools represent the position of your elements when you use flexbox. You can (and should!) read more here.
You can check it yourself by changing the width of the div in the devtools to 202px (as seen in the picture you added), and you'll see there will be no change in the display.
Its because of flex-flow: row wrap;
To clarify, The flex-flow wrap's the content inside .note-tags-list,When the space is not enough to display items inside it(crunchy|recipe|carrot),Vertically,The items that are placed vertically are not visible,as there is fixed height to one of its parent.
The answer is to remove flex-flow: row wrap;
See This fiddle-fork
what do you think about this answer? i only slightly changed the HTML codes.
i change the min-width of .note-tag and set a flex-grow for it.
and now ...
I want the width of the div containing the overflow elements to be just the size of the nonwrapped elements.
is working
#import "https://cdn.jsdelivr.net/npm/bulma#0.9.3/css/bulma.min.css";
#text-that-should-stay {
white-space: nowrap;
color: white;
}
.note-title {
white-space: nowrap;
color: white;
overflow: hidden;
text-overflow: ellipsis;
border: 1px dashed blue;
}
.card {
background-color: black;
}
.row {
display: flex;
justify-content: space-between;
}
.tags-list{
display: flex;
justify-content: flex-end;
border: 2px dashed green;
}
.note-tag {
min-width: 175px;
flex-grow: 1;
}
.note-tags-list {
display: flex;
flex-flow: row wrap;
gap: 5px;
overflow: hidden;
height: 24px;
justify-content: flex-end;
border: 1px dashed red;
}
<div class="card">
<div class="card-content">
<div>
<div class="row">
<p class="note-title">This is a relatively lengthy example title for example purposes.</p>
<div class="tags-list">
<div class="note-tags-list">
<p class="tag note-tag">crunchy</p>
<p class="tag note-tag">recipe</p>
<p class="tag note-tag">carrot</p>
</div>
<p id="text-that-should-stay">I stay</p>
</div>
</div>
</div>
</div>
</div>
.flex-container {
display: flex;
text-overflow: ellipsis;
overflow: hidden;
text-align: left;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
ThisIsASampleText
</div>
Output: ThisIsASamp
Expected: ThisIsASam...
When i remove the flex property it is working fine.
I would like to know why the flex affect the ellipsis.
TIA
Your problem here is the lack of "flex-children". These would need to contain the styles to truncate an element, not the parent container.
Try moving the truncate properties to a separate .flex-child class like so:
.flex-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Source and detailed explanation: https://css-tricks.com/flexbox-truncated-text/
You can do something like this
.flex-container {
display: flex;
}
.flex-container p {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
<p>
ThisIsASampleText </p>
</div>
In your configuration you are having an anonymous block container flex item that contain your text (You may refer to the specificiation for this). The flex item will obey to the min-width constraint thus it will not shrink but will overflow and since it's an anonymous block you have no way to apply min-width to it.
In addition to this, the overflow properties need to be applied to the flex item and not the flex container since this one contain the text and the overflow property aren't inherited. In other words, when using flexbox, you will have two levels: the flex container and the flex items. You need to apply everything to the flex item.
Suppose we add a span around our text we will have this:
.flex-container {
display: flex;
text-overflow: ellipsis;
overflow: hidden;
text-align: left;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
<span>ThisIsASampleText</span>
</div>
Now we are able to target the flex item in order to add min-width:0 and the needed properties in order to have the expected output:
.flex-container {
display: flex;
text-align: left;
}
span {
min-width:0;
text-overflow: ellipsis;
overflow: hidden;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
<span>ThisIsASampleText</span>
</div>
Without the extra wrapper, we cannot target our flex item and applying the properties to the flex container will do nothing.
.flex-container {
display: flex;
text-align: left;
}
.text-container {
min-width: 0;
text-overflow: ellipsis;
overflow: hidden;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
<div class="text-container">ThisIsASampleText</div>
</div>
https://web.archive.org/web/20170801095151/https://brainlessdeveloper.com/2017/07/29/why-wont-my-text-overflow/
add below property in css class
white-space: nowrap;
word-break: break-word;
I have a nested flex container whose text I want to truncate when it isn't wide enough to show (https://codepen.io/BigMike/pen/mmMxQN).
What I want
(Large Screen)
(Small Screen with truncation)
I thought I could do it with
.truncated {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
but as I shrink the screen, the child reaches a point where it won't get any smaller.
Any suggestions?
Based on your comment, if you add this rule, it will all stay on one line
.regular {
flex-shrink: 0; /* won't allow element to become smaller than its content */
}
Updated codepen
.rows {
display: flex;
flex-wrap: wrap;
}
.child {
flex-basis: 50%;
background-color: red;
min-width: 0px;
}
.nested-row {
display: flex;
padding: 20px;
background-color: blue;
justify-content: space-between;
color: white;
}
.nested-child {
border: solid white 1px;
}
.truncated {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border: solid white 1px;
min-width: 0;
}
.regular {
flex-shrink: 0;
}
<div class="rows">
<div class="child">
<div class='nested-row'>
<div class="nested-child truncated">
I want this text to truncate but it breaks on a small screen
</div>
<div class='nested-child regular'>
Now this doesn't wrap
</div>
</div>
</div>
<div class="child">
Some other content
</div>
<div class="child">
Some other content
</div>
<div class="child">
Some other content
</div>
</div>
The problem is the white space property. You can just edit your style sheet like so.
.truncated {
overflow: hidden;
text-overflow: ellipsis;
white-space: wrap;
}
I have a panel with information and above it there's additional information displayed, but I'd like it to be subtle and a one-liner, so when the text that's contained in it is wider than the parent's width, it should be truncated.
See jsfiddle; this is a mock of what I am after.
This is the HTML for that extra information:
<div class="main-container">
<div class="extra-information">
<span>Information</span> –
<span>When this is too long it should be truncated</span>
</div>
<div class="main">Main panel</div>
</div>
And this is the CSS I am trying so far:
.main-container {
width: 350px;
// ...
}
.main {
// ...
}
.extra-information {
display: block;
box-sizing: border-box;
width: inherit;
max-width: inherit;
white-space: nowrap;
text-overflow: ellipsis;
}
Check it out in another jsfiddle.
You may use text-overflow: ellipsis with overflow: hidden in CSS
text-overflow
The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user.
Other possible values for this property are:
clip : Default value. Clips the text
ellipsis : Render an ellipsis ("...") to represent clipped text
string : Render the given string to represent clipped text
overflow
The overflow property specifies what happens if content overflows an element's box.
This property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.
Note
The overflow property only works for block-level elements.
.main-container {
width: 350px;
}
.extra-information {
white-space: nowrap;
overflow:hidden !important;
text-overflow: ellipsis;
}
<div class="main-container">
<div class="extra-information">
<span>Information</span> –
<span>When this is too long it should be truncated</span>
</div>
<div class="main">Main panel</div>
</div>
Something like this?:
.main-container {
font-family: Calibri, serf;
width: 350px;
padding: 10px;
border: 1px solid #ccc;
}
.main {
border-top: 2px solid #ccc;
margin-top: 10px;
padding-top: 10px;
}
.extra-information {
display: block;
box-sizing: border-box;
width: inherit;
max-width: inherit;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
<div class="main-container">
<div class="extra-information">
<span>Information</span> –
<span>When this is too long it should be truncated</span>
</div>
<div class="main">Main panel</div>
</div>
Just added overflow: hidden;.
I want to use text-overflow property on a link. I work for a paragraph but not for a link.
Here is the HTML code
<div>
<ul>
<li>
<p>the text is too long</p>
</li>
<li>
the link is too long
</li>
</ul>
</div>
Here is the css code :
a {
white-space: nowrap;
width:50px;
overflow: hidden;
text-overflow: ellipsis;
}
p {
white-space: nowrap;
width:50px;
overflow: hidden;
text-overflow: ellipsis;
}
See example on http://jsfiddle.net/corinnekm/LLVDB/
Thanks a lot for your help.
an <a> tag is an inline element, you can only apply ellipsis to a block element, try a { display: block; } and it works
http://primercss.io/utilities/ has a css truncate set of rules.
See https://jsfiddle.net/illegs/g04L9xd6/
.css-truncate.css-truncate-target,
.css-truncate .css-truncate-target {
display: inline-block;
max-width: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: top
}
.css-truncate.expandable.css-truncate-target,
.css-truncate.expandable.css-truncate-target,
.css-truncate.expandable:hover .css-truncate-target,
.css-truncate.expandable:hover.css-truncate-target {
max-width: 10000px !important
}
<span class="css-truncate expandable">
<span class="branch-ref css-truncate-target">the link is too long</span>