I have some div with fixed width containing text in the form 1234 days ago (10/10/1900).
The text must wrap the date part (10/10/1900) ONLY if string is too long to stay on the same line
I tried to add a new line before the date and apply the rule white-space: break-spaces; but all string are wrapped
Any other attempts to use overflow-wrap or word-break doesn't work as I wish
Have you some idea? Below I show my example code
.row {
width: 100%;
display: flex;
flex-direction: row;
}
.footer {
width: 170px;
height: 100px;
margin-left: 20px;
padding: 10px;
white-space: break-spaces;
}
.wrong {
background-color: red;
color: white;
}
.correct {
background-color: blue;
color: white;
}
<div class="row">
<div class="footer wrong">1234 days ago (10/10/1900)</div>
<div class="footer correct">4 days ago (04/05/2050)</div>
</div>
<p class="wrong">The text "(10/10/1900)" must be wrapped<p>
<p class="correct">The text "(04/05/2050)" fits the line so isn't necessary to wrap<p>
Put the dates into span elements with white-space set to pre.
<span style="white-space: pre;">(10/10/1900)</span>
(Note that, if the date is wider than the container's 170px width, it will continue to extend past the box without wrapping.)
Instead of writing "/" use the HTML entity / which should prevent a breakup when pushing the date into the next line.
<div class="row">
<div class="footer wrong">1234 days ago (10/10/1900)</div>
<div class="footer correct">4 days ago (04/05/2050)</div>
</div>
Related
This is code for the div
width: 110px;
height: 10px;
background: #ffff;
border-radius: 30px;
margin-top: -10px;
and this is how it displays it
But if display is set as list-item it shows up,any other display won't work
I'm not sure what i messed up,and why height shows 0
height only works on block box, and display: list-item uses block box by default. I guess your original css may contain inline-type display and cause height not working. Here is an example to show the results in different cases:
.bar {
width: 110px;
height: 10px;
background: #ffff;
border-radius: 30px;
margin-top: -10px;
}
.display-block {
display: block;
}
.display-inline {
display: inline;
}
.display-list-item {
display: list-item;
}
<body style="background: #999;padding: 10px">
<div>Div (default display is "block")</div>
<div class="bar"></div>
<div>Span (default display is "inline")</div>
<span class="bar"></span>
<div>With "inline" display</div>
<div class="bar display-inline"></div>
<div>With "block" display</div>
<div class="bar display-block"></div>
<div>With "list-item" display</div>
<div class="bar display-list-item"></div>
</body>
Ref: MDN - Introduction to the CSS basic box model - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content_area
Another possible case is that there are other display, height or max-height settings in the current css hierarchy and override the original ones. You may check the css applied to the target div is what you want.
An expanded question on :
pure CSS multiple stacked position sticky?
is there a way to calculate the top position of the followup header in order to stack the headers as per the the example. I do not know the count of the amount of headers there will be so i cannot say:
.headers {position:sticky}
.header-1 {top:0;}
.header-2 {top:1em}
.header-3 {top:2em}
.header-4 {top:3em}
but would need to calculate the difference
HTML:
<div class="container">
<div class="headers header-1">header 1<div>
<div class="content">This is the content<div>
<div class="headers header-2">header 2<div>
<div class="content">This is the content<div>
<div class="headers header-3">header 3<div>
<div class="content">This is the content<div>
<div class="headers header-4">header 4<div>
<div class="content">This is the content<div>
I would need to somehow calculate the :nth-child or :type-of or so method as the list grows. not sure if it could be done in css but would like to know if it is possible
If the question is Can I use the n of nth-child or nth-of-type to calculate attributes automatically?
The answer is No, you can't, at least for now.
But there are several workarounds:
This one is not very elegant, but it's actually the most used one so far.
.bars span {
display: block;
height: 1em;
margin-bottom: 1em;
background-color: salmon;
}
.bars span:nth-child(1) {
width: 1em;
}
.bars span:nth-child(2) {
width: 2em;
}
.bars span:nth-child(3) {
width: 3em;
}
.bars span:nth-child(4) {
width: 4em;
}
// ... and many more
<div class="bars">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
And if you're using precompiled css such as scss, it can be shortened as:
#for $i from 1 through 20 {
.bars span:nth-child(#{$i}) {
width: #{$i}em;
}
}
The other one is using css variable. But you have to assign the variables manually:
.bars span {
display: block;
height: 1em;
margin-bottom: 1em;
background-color: salmon;
}
.bars span {
width: calc(var(--length) * 1em);
}
<div class="bars">
<span style="--length: 1;"></span>
<span style="--length: 2;"></span>
<span style="--length: 3;"></span>
<span style="--length: 4;"></span>
</div>
Given an inline (or inline-block) element with text of variable length, and another element to the right of the first one that acts as a kind of badge, is there a way to prevent a line break between the last word of the first element and the second element? Both elements occupying the same line is fine; a line break occurring in the text of the first element is also fine; but a line break between the two elements is undesirable. Here is an illustration explaining what I mean.
Is there a way to do this? I tried to have the two elements as spans and put a non-breaking space between them, but that didn't work.
UPDATE: Here's a quick and dirty Codepen example: http://codepen.io/anon/pen/LkzBQJ
html:
<h1>
<span class="title-text">
This is some text
</span><span class="badge">yo!</span>
</h1>
<h1>
<span class="title-text">
This is some broken text
</span><span class="badge">yo!</span>
</h1>
css:
h1 {
width: 350px;
}
.badge {
color: #f6511d;
display: inline-block;
border: 1px solid #f6511d;
border-radius: 3px;
font-size: 0.8em;
padding: 0.1em 0.2em;
line-height: 0.97em;
margin-left: 0.4em;
vertical-align: 1px;
}
UPDATE2: In my particular case, both the text in the first element, and the badge have to be rendered dynamically, using JavaScript. So Ricardo’s solution below (wrap the last word of the text and the badge in a span with white-space: nowrap), although working, will not be very easy to implement.
Check this! This line <h1>This is some text</h1><span class="badge">yo!</span> must be in one line to work.
https://codepen.io/lemonjelly/pen/rNNvLGE
SOLUTION:
The solution I could come up with is creating some sort of fix, wrapping text with the badge in a span and using the css property white-space: nowrap;.
JSFiddle
CODE SNIPPET:
.row {
display: flex;
counter-reset: paragraph;
}
.col {
width: 50%;
padding: 1em;
}
.col--left {
background-color: #011627;
padding-right: 0;
}
.col--right {
background-color: #F71735;
border-left: 2px dotted #ddd;
}
.col p {
color: #fff;
}
.col p::before {
counter-increment: paragraph;
content: counter(paragraph)". ";
}
.badge-fix {
display: inline-block;
white-space: nowrap;
}
.badge {
display: inline-block;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
.badge--royalblue {
background-color: royalblue;
}
.badge--tomato {
background-color: tomato;
}
.badge--crimson {
background-color: crimson;
}
<div class="row">
<div class="col col--left">
<p>
This is <span class="badge-fix">some text
<span class="badge badge--royalblue">badge</span></span>
</p>
<p>
This is some <span class="badge-fix">reasonably long
<span class="badge badge--tomato">badge</span></span>
</p>
<p>
This is some <span class="badge-fix">longish text
<span class="badge badge--crimson">badge</span></span>
</p>
</div>
<div class="col col--right">
</div>
</div>
This problem is called a widow in typesetting. There are 3 ways to fix this.
Use the widows css property
Only break the last two words together.
<h1 style="widows: 2;">
<span>This is some broken text</span>
<span class="badge">yo!</span>
</h1>
Caveat: Not supported by Firefox (https://caniuse.com/?search=widows) and seems to only work properly with page breaks and column breaks
Use a character
Add a "physical" non-breaking space character, and only that character, between the last word and the badge.
<h1 style="widows: 2;">
This is some broken text <span class="badge">yo!</span>
</h1>
If you have to do this with multi-line code, you can use HTML comments to avoid breaking spaces.
<h1 style="widows: 2;">
This is some broken text<!--
--> <span class="badge">yo!</span>
</h1>
Caveat: It's ugly
Wrap the last word and the badge in a white-space: nowrap span.
<h1 style="widows: 2;">
This is some broken <span style="white-space: nowrap;">text <span class="badge">yo!</span></span>
</h1>
Caveat: Not always possible if you are dealing with dynamically generated code
You can add padding to the text and a negative margin:
<h1>
<span class="title-text" style="padding-right: 15px;">
This is some text
</span><span class="badge" style="margin-left: -15px;">yo!</span>
</h1>
<h1>
<span class="title-text" style="padding-right: 15px;">
This is some broken text
</span><span class="badge" style="margin-left: -15px;">yo!</span>
</h1>
This works for even dynamically generated content, unlike having to make a tag around the last word of the text and the image.
(Based on an answer I saw here: https://stackoverflow.com/a/25857961/5899236)
I am using slick slider and showing 3 slides, I would like to add specific styling on the center slide. by using nth-of-type but it seems to fail when I add .slick-active:nth-of-type(2) any ideas?
for example:
<div class="slickslider">
<div class="slick-slide"></div>
<div class="slick-slide"></div>
<div class="slick-slide"></div>
<div class="slick-slide slick-current slick-active"></div>
<div class="slick-slide slick-active"></div>
<div class="slick-slide slick-active"></div>
<div class="slick-slide"></div>
<div class="slick-slide"></div>
</div>
.slick-slide{
background: blue;
width: 20px;
height: 20px;
margin-bottom: 1px;
}
.slick-active{
background: green;
width: 20px;
height: 20px;
}
.slick-active:nth-of-type(2){
background: pink;
}
https://jsfiddle.net/pixelatorz/73scpych/2/
You can do it this way by playing process of elimination:
.slickslider .slick-active + .slick-active:nth-child(odd){
background: pink !important;
}
See demo
Basically, eliminate the first one with the + and next, eliminate the last one by choosing the odd child. Or first child would've worked too
EDIT
If you think there will be more than 3 active slides in the future and you want to make this more dependable, I suggest you wrap the active slides in a <span> and class it active-slides or something similar. Then. you will be able to select through them with nth-child without using .slickslider as a parent.
Is a stupid solution, but works:
.slick-slide:nth-of-type(6){
background: pink;
}
Firstly, I would like to say that I have tested if my link to my .css works, the background is made into a black color.
This is a ASP.NET Mvc test application which I am making, and I am having difficulty positioning some of my elements which are nested in div boxes. I have come to the conclusion that my div boxes nested within the topmostheader box is ignoring my .css code.
Here is my entire css file, called custom1.css
#topmostheader
{
background: none repeat scroll 0% 0% rgb(0, 0, 0);
height: 90px;
text-align: center;
}
#topmostheader.inner
{
width: 1280px;
margin: 0 auto;
text-align: left;
background-color: Red;
}
#topmostheader.app-name
{
font-size: 14px;
float: left;
line-height: 90px;
color: rgb(119,119,119);
margin: 0px 20px 0px 0px;
}
#topmostheader.xxx-logo
{
margin: 0px;
height: 90px;
float: right;
}
and here is my div box layout.
<div id="topmostheader">
<div class="inner" >
<div class="app-name">
Lunch Application
</div>
<div class="xxx-logo">
<img src="/content/xxx/logo.png" alt="xxx logo"/>
</div>
</div>
</div>
The desired result is not produced: the app-name, inner and acceleration logo divboxes are all dead-center in the screen, where the app-name must be in the left side, and the logo in the right.
I have tested the following code (Which produced the desired result, in an undesired manner - I may reuse this code multiple times which are in the .css file)
<div id="topmostheader">
<div class="inner" >
<div class="app-name" style="float:left">
Lunch Application
</div>
<div class="xxx-logo" style="float:right">
<img src="/content/xxx/logo.png" alt="xxx logo"/>
</div>
</div>
</div>
What am I doing wrong? Why are my div boxes not "floating" when I use the .css file?
To target the correct divs you need a space between the id and class name in your CSS rules: (e.g. change #topmostheader.app-name to #topmostheader .app-name)
You’re missing a space between your ID selectors and your class selectors.
#topmostheader.inner means “select the element with an id of topmostheader and a class of inner”.
You want #topmostheader .inner, which means “select elements with a class of inner that are descendants of the element with an id of topmostheader“
you need to put a space between the id #topmostheader and the class e.g. .acceleration-logo otherwise the browser assumes you are applying style to div with id #topmostheader and class .acceleration-logo not a child of class .acceleration-logo with parent of #topmostheader