I have a case which I'm trying to solve with pure CSS, but I somehow feel like it is not possible (or at least not without using tables).
Imagine following layout
<div class="parent">
<span class="name">
Some name
</span>
<span class="number">
123
</span>
</div>
I want the parent to be of a fixed width and then have name followed inline by number. However, if the name is too long, I would like it to truncate (using ellipsis), but the number should remain and be moved to the right until it reaches the border of parent.
Here are few examples to illustrate.
Short text 1 |
Longer text 12 |
Very, very lon..123|
Notice that also the number text can have variable length (thus the width can't be fixed).
Any ideas?
CSS Flexbox layout does a good job of making this sort of thing a breeze. You can read about the details on using it on the MDN article "Using CSS Flexible Boxes", but here is a simple example of how it can solve your layout:
.parent {
display: flex;
width: 8em;
}
.name {
/* Make width shrinkable beyond width of content */
flex: 0 1 auto;
/* Make sure text doesn't wrap or push beyond element boundaries */
overflow: hidden;
white-space: nowrap;
/* Show an ellipsis when text cuts off */
text-overflow: ellipsis;
}
.number {
/* Make width inflexible */
flex: 0 0 auto;
}
You can see it in action in this example JSBin.
Related
I'm having a problem getting long lines of text to correctly break and wrap in a chat feature that I'm working on. The HTML below is the relevant set of nested elements, but the crux of the biscuit is with .chat__messages__item and .chat__messages__body (the whole block below is inside of an element that is set to 24vw, so it is all intended to be window-width-responsive).
First off, here's the HTML/CSS...
<style>
.chat__messages__inner{
display: table;
height: 100%;
width: 100%;
}
.chat__messages__list {
display: table-cell;
vertical-align: bottom;
margin: 0;
padding: 10px 20px 0;
list-style-type: none;
}
.chat__messages__item {
position: relative;
margin-bottom: 10px;
padding: 8px 10px;
background-color: #D8F2FD;
clear: both;
}
<!-- THIS STYLE HAS NO AFFECT UNLESS I SET A MAX-WIDTH ON .chat__messages__item -->
.chat__messages__body {
word-wrap: break-word;
}
</style>
<div class='chat__messages__inner'>
<ul class='chat__messages__list'>
<li class='chat__messages__item'>
<div class='chat__messages__body'>
hereisaverylonglineoftextthatiwouldliketobreakandwrap
</div>
</li>
<li class='chat__messages__item'>
<div class='chat__messages__body'>
here is a long sentence that will wrap and behave correctly
</div>
</li>
</ul>
</div>
The desired behavior is that the <div> and <li> containing the text should be no wider/taller than the text itself, but those elements also should never be wider than their parents - so for a few words, they might be 150px wide, but if the container shrinks to be less than 150px, these elements will also start to shrink and the text inside will start to wrap.
Playing with this code, I was able to get close to the desired result by setting the style for .chat__messages__body to include word-wrap: break-word and then setting the parent .chat__messages__item to include max-width: 300px (omitted above). Although the long word would break and wrap, it only produced the correct result on my full-screen window - if the window is resized or starts off at less-than-full, the word still wraps but the div is 300px wide (I tried setting this as a percentage, but that does not work, the word actually unwraps).
The long sentence that I included above does exactly what I would like - its parent <div> and <li> are both the size of the text, and if the window shrinks so that the width of these elements would be greater than their parents (which all scale to the 24vw ancestor), they begin to shrink as well and the text wraps on spaces.
In plain English, I would like the long word's container to never be wider than the 100% width ancestors, and it needs to resize dynamically with the window, breaking and wrapping along the way.
I'm not really a CSS/design expert, this is code I inherited from someone else, and I've been fighting with this for way too long... any guidance would be much appreciated.
Here is a question you could check out. One of the answers suggest what I would try, which is to use the <wbr> tag which creates a word break opportunity. You can read about it here.
Ok, turns out the thing to do was to set .chat__messages__inner and .chat__messages__list to display: inline-block with width: 100%, and .chat__messages__item needed to have max-width: 100%.
I have a single-line fixed-width container div with two variable-width span inside. Any overflow of the first span should be hidden with an ellipsis. The second span floats on the right and should be shown in full. Please see this Fiddle:
<div class='container'>
<span class='left'>Long long variable stuff</span>
<span class='right'>Changing stuff</span>
</div>
I want the first span's width to dynamically adjust according to the width of the second span so that both span stay on the same line. How can I do that?
You can use Flexbox, so with flex: 1 on .right, .left will adjust its size and overflow will be hidden.
.container {
width: 200px;
display: flex;
border: 1px solid black;
}
.left {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.right {
flex: 1;
white-space: nowrap;
}
<div class='container'>
<span class='left'>Long long variable stuff</span>
<span class='right'>Changing stuff</span>
</div>
I don't think there's any way for CSS to dynamically know the length of an element without javascript. If you're looking for a purely CSS solution you're going to need to give it some direction in order for it to know the widths you want. Visually, that might be a bit of a compromise for you, but it will allow you to ensure that everything is always on one line.
For the solution I'm about to propose to work you need to know one width of the two. In this case I'm going to say that you can make a best guess of the "changing stuff" on the right.
Your first problem is that spans are inline elements by default - not inline-block. In order to get the overflow text property to work, you need to use it with an inline-block or block element.
The next piece is to use calc. Calc excepts mixed measurements so you can subtract an exact pixel value off of a percent. This works really well for responsive layouts.
I've created an updated version of your plunker to illustrate:
https://jsfiddle.net/n19ddahb/5/
For a webpage grid-layout I decided to use Flexbox. Now I wanted to implement some "auto-functionality", so that grid-boxes can later be inserted without the need to add classes or styles in the HTML. One of this features is to make a box allways be 75% as tall as it is wide - even if the box is resized by, for example, browserwindow resize. Off course, if the boxes content extends the 75%-height, it should (and only then should) increase its height to fit the content. I searched for hours to find a suitable solution, but I finally got it working. So I thought at least, until I added content to the box.
The auto aspect-ratio works fine, as long as the box is empty. If I add content, the 75% of the width is allways added to the height it has through extension by its content. I made a jsfiddle to clearly visualize the problem:
JSFiddle wd5s9vq0, visualizing the following Code:
HTML-Code:
<div class="container">
<div class="content-cell"></div>
<div class="content-cell"></div>
</div>
<div class="container">
<div class="content-cell">
This cell has an inreased height because of
it's content. The empty space below the
content is the 75% of the cells width.
</div>
<div class="content-cell"></div>
</div>
CSS:
.container {
display: flex;
width: 400px;
}
.content-cell {
flex: 1 1 0;
margin: 10px;
background-color: #ccc;
}
.content-cell::after {
content: "";
display: block;
padding-top: 75%;
}
If I didn't knew it better, it looks like a floating-problem - but I think the ::before / ::after selector should add the block-element before the element it is used on and not inside it.
Does anyone has an idea on how to fix this problem?
This seems to be a very widespread problem on the internet, and most solutions you find are either about wrapping the content, absolute-positioning the content or a mixture of both. This has numerous and case-dependent downsides. After hours of playing around with the code, I finally found a combination of CSS proporties that work without the need to add any DOM or make the content absolute-positioned. This looks quit basic, and I am wondering why it took me so long and why you can't find it out there on the web.
The HTML:
<div class="mybox aspect-full">
This is text, that would normally extend the box downwards.
It is long, but not so long that it extends the intended aspect-ratio.
</div>
The CSS:
.mybox {
width: 200px;
}
.aspect-full::before {
content: '';
display: block;
padding-top: 100%;
float: left;
}
The only downside I could find is that the content of your cell must float. If you use clear on one of your child objects, it is positioned below the expander-block and you are back to the original problem. If you need to clear the floating of divs inside of these aspect-ratio-cells, you might consider to wrap them and keep the wrapper floatable.
The problem we're trying to solve is that text is overflowing past the end of a <p>. It seems to be the result of its contents, which include a relatively-positions <a> element, with an absolute-positioned <span> element within it, which has padding. Firefox wraps the text as I would normally expect.
Here's an abstraction of my HTML:
<p>
In this second example,
<a href="#">
<span class="icon"><img src="play.gif"></span>
mo
</a>
muh...
</p>
And an abstraction of the CSS, as simplified as I think still makes sense:
a {
padding: 5px;
}
a span.icon {
position: absolute;
display: block;
width: 15px;
height: 15px;
}
Here's a screenshot of the problem (the highlighting is Chrome's element inspector with the <p> element highlighted). You can see the word immediately overflowing at the end of the <p>:
Any pointers in the right direction appreciated.
Instead of using absolute positioning, try using display:inline or display:inline-block (if you need to set height/width - Note: not supported in IE 7 and lower).
You could drop the display all together, because images and spans are inline to start with. I have an example here removing the span and just styling the image and surrounding link.
You could also use the image as a background for the button, and set the padding to account for the space. Example:
.button{
background: url(img/buttonIcon.png) no-repeat; /* 15x15 icon */
padding: 0 0 0 15px;
}
example
I'm building a multilingual site, with the owner helping me with some translations. Some of the displayed phrases need line breaks to maintain the style of the site.
Unfortunately, the owner isn't a computer guy, so if he sees foo<br />bar there's the chance he'll modify the data somehow as he's translating.
Is there a CSS solution (besides changing the width) to apply to an element which would break after every word?
(I know I can do this in PHP, but I'm wondering if there's a nifty trick I don't know about in CSS to accomplish the same thing, perhaps in the CJK features.)
EDIT
I'll attempt to diagram what's happening:
---------------- ----------------
| Short Word | | Gargantuan |
| | | Word |
---------------- ----------------
The long word breaks automatically, the short word doesn't. I want it to look like this:
---------------- ----------------
| Short | | Gargantuan |
| Word | | Word |
---------------- ----------------
Use
.one-word-per-line {
word-spacing: <parent-width>;
}
.your-classname{
width: min-intrinsic;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
display: table-caption;
display: -ms-grid;
-ms-grid-columns: min-content;
}
where <parent-width> is the width of the parent element (or an arbitrary high value that doesn't fit into one line). That way you can be sure that there is even a line-break after a single letter. Works with Chrome/FF/Opera/IE7+ (and probably even IE6 since it's supporting word-spacing as well).
The answer given by #HursVanBloob works only with fixed width parent container, but fails in case of fluid-width containers.
I tried a lot of properties, but nothing worked as expected. Finally I came to a conclusion that giving word-spacing a very huge value works perfectly fine.
p { word-spacing: 9999999px; }
or, for the modern browsers you can use the CSS vw unit (visual width in % of the screen size).
p { word-spacing: 100vw; }
Try using white-space: pre-line;. It creates a line-break wherever a line-break appears in the code, but ignores the extra whitespace (tabs and spaces etc.).
First, write your words on separate lines in your code:
<div>Short
Word</div>
Then apply the style to the element containing the words.
div { white-space: pre-line; }
Be careful though, every line break in the code inside the element will create a line break. So writing the following will result in an extra line break before the first word and after the last word:
<div>
Short
Word
</div>
There's a great article on CSS Tricks explaining the other white-space attributes.
An alternative solution is described on Separate sentence to one word per line, by applying display:table-caption; to the element
If you want to be able to choose from different solutions, in addition to the given answers...
An alternative method is to give the container a width of 0 and to make sure overflow is visible. Then each word will overflow out of it and will be on its own line.
div {
width: 0;
overflow: visible;
}
<div>Short Word</div>
<hr>
<div>Gargantuan Word</div>
Or you can use one of those newly proposed width values, provided those still exist by the time you read this.
div {
width: min-intrinsic; /* old Chrome, Safari */
width: -webkit-min-content; /* less old Chrome, Safari */
width: -moz-min-content; /* current Firefox */
width: min-content; /* current Chrome, Safari; not IE or Edge */
}
<div>Short Word</div>
<hr>
<div>Gargantuan Word</div>
<span> is an inline element and I'm adding an display: inline-block to give a width to the element max-width: min-content;, min-content is the value/width of the smallest word in your text/sentance.
If you use min-content, the "width" will be your longest word. In this case Example is your longer word. But if you have different words like and if or few 2/3 char words then this words will fit on the same line.
If you want to keep the on word behavior you can give a fixed width, for example 5px.
Check more examples in CodePen.
.wrapWord {
display: inline-block;
max-width: min-content;
}
<div>
<span class="wrapWord">
Example Word
</span>
</div>
The best solution is the word-spacing property.
Add the <p> in a container with a specific size (example 300px) and after you have to add that size as the value in the word-spacing.
HTML
<div>
<p>Sentence Here</p>
</div>
CSS
div {
width: 300px;
}
p {
width: auto;
text-align: center;
word-spacing: 300px;
}
In this way, your sentence will be always broken and set in a column, but the with of the paragraph will be dynamic.
Here an example Codepen
You can't target each word in CSS. However, with a bit of jQuery you probably could.
With jQuery you can wrap each word in a <span> and then CSS set span to display:block which would put it on its own line.
In theory of course :P
https://jsfiddle.net/bm3Lfcod/1/
For those seeking for a solution that works within a flexible parent container with a children that is flexible in both dimensions. eg. navbar buttons.
//the parent (example of what it may be)
div {
display:flex;
width: 100%;
}
//The children
a {
display: inline-block;
}
//text wrapper
span {
display: table-caption;
}
I faced the same problem, and none of the options here helped me. Some mail services do not support specified styles.
Here is my version, which solved the problem and works everywhere I checked:
<table>
<tr>
<td width="1">Gargantuan Word</td>
</tr>
</table>
OR using CSS:
<table>
<tr>
<td style="width:1px">Gargantuan Word</td>
</tr>
</table>
I did this on a project where the client wanted the 3 word title on a different line. Basically your increase the spaces with CSS the use the white-space to separate the lines.
word-spacing:9999px;
white-space: pre-line;
In my case,
word-break: break-all;
worked perfecly, hope it helps any other newcomer like me.