If you run the snippet below, everything looks like it's working. But if you inspect the text within the border in your dev-tools, and hover over the element you'll see the width of the text is still full length. This is a problem when trying to make that container responsive. How can I hide the overflow, and use text-overflow: ellipsis while having it's width be representative of what we see?
.container {
width: 300px;
border: 1px solid #000;
display: flex;
flex-direction: row;
}
.text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="container">
<span class="text">
<a>
looooooooooooooooooooooooooooooooooooooooooooooooooooooooog text
</a>
</span>
<button>hello</button>
</div>
You can remove the <span> and add the .text class to your <a> tag. Your CSS was not applied to your text because of the <a> tags
.container {
width: 300px;
border: 1px solid #000;
display: flex;
flex-direction: row;
}
.text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="container">
<a class="text">
looooooooooooooooooooooooooooooooooooooooooooooooooooooooog text
</a>
<button>hello</button>
</div>
Related
I have a few spans in a fixed width container.
One of the spans is longer than the others and changes in size at different times. I'm trying to limit this span to a maximum width so that the 3 spans fit on one line.
What I have so far works, but the problem is the span that is limited in length is slightly offset and the spans don't line up perfectly. What should I do to make all 3 spans fit on one line and align with each other so they look normal?
JSfiddle: https://jsfiddle.net/579cwmbv/
Code:
.container {
width: 350px;
display: inline-block;
}
.spanContainer {
display: inline-block;
}
.long {
overflow: hidden;
text-overflow: ellipsis;
max-width: 156px;
display: inline-block;
white-space: nowrap;
}
.short {
display: inline-block;
}
<div class='container'>
<div class='spanContainer'>
<span class='short'>Results near </span>
<span class='long'>"Seattle, WA, 98005, United States"</span>
<span class='short'>Change</span>
</div>
</div>
Try using flex
.spanContainer {
display: flex;
justify-content: space-evenly;
align-items: center;
}
If you format the spans in the same way as each other they line up:
.container {
width: 350px;
display: inline-block;
}
.spanContainer {
display: inline-block;
}
.long,
.short {
overflow: hidden;
text-overflow: ellipsis;
max-width: 156px;
display: inline-block;
white-space: nowrap;
}
<div class='container'>
<div class='spanContainer'>
<span class='short'>Results near </span>
<span class='long'>"Seattle, WA, 98005, United States"</span>
<span class='short'>Change</span>
</div>
</div>
I have two div elements sitting side by side. I want the left div to take remaining space of the width of the right div.
.text {
display: inline;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
background-color: red;
}
.icon {
display: inline-block;
width: 92px;
background-color: green;
}
.information {
width: 200px;
}
<div class="information">
<div class="text">Text Here</div>
<div class="icon">Image Here</div>
</div>
Everything I've tried, causes the icon div to resize/overflow based on the remaining space left from the text.
But I want my text div to overflow if the width on the icon div is more. Is there anyway to do this?
I can't set the width (using less or calc(totalWidth - iconWidth))
for the text div because the icon div's width can vary and I don't know what its value might be (the value of the icon's width is calculated in a mixin).
Fiddle link: https://jsfiddle.net/fdur0wd1/
Use flex on the parent, and set .text to flex-grow: 1 (or flex: 1 0 0 for short)
.text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
background-color: red;
flex: 1 0 0;
}
.icon {
width: 92px;
background-color: green;
}
.information {
width: 200px;
display: flex;
}
<div class="information">
<div class="text">Text Here</div>
<div class="icon">Image Here</div>
</div>
I have a inline-flex container with two inner blocks that must expand (without wrapping).
In the second block there is another inline-flex container with two inner inline-blocks that must never wrap their content.
What I need
Is to show the text-overflow: ellipsis when the width of the most-top container (div.width) is not enough for displaying all the inner blocks as white-space: nowrap.
The content of div.width must never overflow its container, in the case the content of the a link is too long.
Snippet
.splitbutton {
display: inline-flex;
border: 4px solid violet;
}
.default {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.default a {
/* white-space: nowrap; */
}
.button {
background-color: green;
padding: 5px;
}
.container1 {
white-space: nowrap;
}
.container1,
.container2 {
flex: 1 1 auto;
border: 3px double green;
}
.width {
border: 3px solid red;
/*width: 350px;*/
display: inline-flex;
flex-wrap: nowrap;
flex-direction: row;
}
<div class="width">
<div class="container1">
<span>Any kind of inline text</span>
</div>
<div class="container2">
<div class="splitbutton">
<div class="default">
Looooooooooooong text with many many spaces and letters
</div>
<span class="button">button</span>
</div>
</div>
</div>
Note
None of the present blocks can specify a specific fixed width!
The button must always stay visible (the ellipsis should eventually be applied to the a link element).
I'm trying to implement white-space: nowrap; and text-overflow: ellipsis; on a flex:1; div without setting the max-width. I want it to adjust to the width flex:1 gives.
Here is a fiddle that explains what I want and what actually happens:
https://jsfiddle.net/dani3l/6y04bvu1/13/
I'd like to keep the solution css only if possible.
Thanks in advance!
You can try this in your flex:1 class:
.flex-1, .flex-1 > * {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Here is a snippet to show this.
.flex-container {
display: flex;
align-items: center;
height: 50px;
width: 120px;
padding: 0 10px;
background-color: black;
}
.flex-1 {
flex: 1;
color: white;
}
.flex-1, .flex-1 > * {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="flex-container">
<div class="flex-1">
This is very long text.
</div>
</div>
<br>
<br>
<div class="flex-container">
<div class="flex-1">
<div>
Child divs work too
</div>
<br />
<span>
Child spans work too
</span>
</div>
</div>
I found Larry Gordon's Codepen that helped me with this.
to apply text-overflow: ellipsis, you have to give width or max-width otherwise it don't have any idea where it needs to stop.
I have some pretty simple markup and I want long text to be truncated with "..."
.topRow div {
display: inline-block;
}
#name {
max-width: 70%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="topRow">
<div id="edit">
<div id="pre">Before -</div>
<div id="name">Some long text that should get truncated when it passes the max width</div>
<div id="post">- After</div>
</div>
</div>
Fiddle : http://jsfiddle.net/xyPrv/3/
The problem is that when I add overflow: hidden to the div, it makes the text jump up a few pixels and is out of alignment with the rest of the text around it.
What is causing this vertical movement? Without manually pushing the text back down (with position: relative; and top: 5px), how can I cleanly get the text to be aligned?
Try this:
.topRow div {
display: inline-block;
vertical-align:middle;
}
#name {
max-width: 70%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="topRow">
<div id="edit">
<div id="pre">Before -</div>
<div id="name">Some long text that should get truncated when it passes the max width</div>
<div id="post">- After</div>
</div>
</div>
http://jsfiddle.net/V79Hn/
If you change this:
.topRow div {
display: inline-block;
}
to this:
.topRow div {
float:left;
}
Then it's as you want it.
Or just use:
div {
width: 100%;
line-height: 1.2em;
height: 3.6em;
background-color: gainsboro;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}