HTML:
<p>
<a href="#">my
<span>favorites</span>
</a>
(13)
</p>
I want "favorites" to drop after "my", and then to separately style "(13)", which should be on the same line as "favorites".
I tried with the above markup and the following CSS but (13) also drops:
p span a { display: block; }
(13) should stay on the same line as "favorites" so it looks like
my
favorites(13)
How about this?
my<br>favorites<span>(13)</span>
The longer version (more flexibility)
If you don't want a line break, you could use a block element. Now, since block elements aren't allowed inside inline elements (<a>), you should use span tags and style them as block elements.
<a href="#">
my
<span class="second-line">
favorites <span class="count">(13)</span>
</span>
</a>
And the CSS:
a .second-line {
display: block;
}
a .count {
color: #888888;
}
Would this work for you?
<p>
<a href="#">my
<p>favorites <span>(13)</span></p>
</a>
</p>
Related
How do I make the first line of ::after in bold?
I'm making a CSS snippet for Obsidian. I want to make a Dropdown for tags that start with '#-'. How do I make the first line bold?
I can't change HTML code:
<p>
<a href="#-Dropdown" class="tag" target="_blank" rel="noopener">
#-Dropdown
</a>
</p>
Those CSS blocks don't even appear in the devtools:
a.tag[href^='#-']::after::content {
font-size: 20px;
}
a.tag[href^='#-']::after::first-line {
color: red;
}
A jsfiddle if you're willing to try yourself
I have a list group that holds a bunch of attributes, but when I clarify that the last element within that group hold a margin of 0, the output doesn't match.
The Salesforce HTML:
<aura:iteration items="{!v.IdeasList}" var="idea">
<li class="list-group-item">
<a href="{!v.ideaDetailPath + idea.Id }" class="anchorLink">
<div class="prodname">{!idea.Title}</div>
</a>
<div class="ideaInfo">
<span class="points">{!idea.VoteTotal} points </span>
<span style="padding-right:24px;">
<span class="status">
{!idea.Status}
</span>
</span>
<span class="createdDate"><ui:outputDate value="{!idea.CreatedDate}"/></span>
<!--span class="slds-avatar slds-avatar_circle slds-avatar_small">
<img src='{!idea.CreatorSmallPhotoUrl}'/>{!idea.CreatorName}</span>
<span class="slds-text-title_bold">
<a class="profileName" href="javascript:void(0)"
id="profile-link"
data-createdByValue="{!idea.CreatedById}"
onclick="{!c.openProfileWindow}">
{!idea.CreatorName}</a></span-->
<a class="slds-text-title_bold profileName" id="profile-link" data-createdByValue="{!idea.CreatedById}" href="javascript:void(0);" onclick="{!c.openProfileWindow}">
<span class="slds-avatar slds-avatar_circle slds-avatar_small slds-m-right_x-small">
<img src="{!idea.CreatorSmallPhotoUrl}"/>
</span>{!idea.CreatorName}
</a>
</div>
<div class="slds-border_bottom">
</div>
</li>
</aura:iteration>
The Salesforce CSS:
.THIS .list-group-item {
font-size: 12px;
list-style: none;
width: 100%;
margin-bottom:24px;
}
.THIS .list-group-item:last-child{
margin-bottom:0;
}
Does that mean pseudo elements (specifically last-child in this case) don't work in Salesforce Lightning CSS?
It seems that the only thing that works is :nth-last-child(2) - because for some reason, :last-child doesn't acknowledge that the last item is actually the last item.
I did a search within the HTML to check that there was no other element after the element I was hoping to edit via CSS, but there wasn't. Seems as though this is a salesforce bug? Anyway,s :nth-last-child(2) worked instead of :last-child
The picture is the layout that I want but when you hover, everything gets messed up. The div's start shifting around and moving horizontally when the next div italicizes. How can I maintain this exact layout 100% of the time?
.project-link {
font-family: 'UtopiaStd';
color:#010202;
font-size:5.6vw;
white-space:nowrap;
text-decoration:none;
margin-right: 3%;
line-height:125%;
border-bottom: solid transparent 2px; }
https://jsfiddle.net/zjkouzbo/1/
Solution 1:
You had the right idea with trying white-space:nowrap. To keep your first two links together and keep them on one line, wrap them in a parent element and apply the white-space:nowrap to that parent element. If you have that on both the anchor elements and the parent elements, then you won't break the lines in the middle of a link or between them.
<div class="line">
<a class="project-link" id="one" href="#modal1">Maru speaker design <span> (1) </span> </a>
<a class="project-link" id="two" href="#modal2">Lights — Out <span> (2) </span></a>
</div>
CSS
.line{
white-space: nowrap;
}
New fiddle: https://jsfiddle.net/zjkouzbo/2/
Solution 2:
Place a non-breaking space between the anchor elements that you want to keep on the same line using the HTML entity . Just make sure that you take out any other spaces, including line breaks, between the two elements. This makes your code a little annoying to read, but it doesn't suffer from the "div-itis" that solution one does.
<a class="project-link" id="one" href="#modal1">Maru speaker design <span> (1) </span> </a> <a class="project-link" id="two" href="#modal2">Lights — Out <span> (2) </span></a>
Second fiddle: https://jsfiddle.net/zjkouzbo/3/
Since the <a> tag is an inline element, it will adjust which 'line' it is on as the parent block element changes width, or in your case the link width changes size. If you want to keep a the particular layout where link 1 and 2 are on the same line, but different lines from the rest, you should organize each group in a block element.
<div class="project_miniwrap">
<div class="group-block">
<a>Link 1</a>
<a>Link 2</a>
</div>
<div class="group-block">
<a>Link 3</a>
<a>Link 4</a>
</div>
</div>
adding
display:inline-block
and removing the line breaks you added to project-link solves the issue.
https://jsfiddle.net/70dceskq/1/
I have the following structure within a bootstrap document -
<div class="col-lg-6 col-sm-6>
<ul class="stdULGrey st_tabs_ul">
<li class="st_li_first st_li_active">
<a href="#view_1" class="st_tab st_tab_first st_tab_active">
<span class="icoMore icoA"></span>
<span class="tabText">WANT TO KNOW MORE?</span></a>
</li>
<li>
<a href="#view_2" class="st_tab">
<span class="icoWhereTo icoA"></span>
<span class="tabText">WHERE TO FIND US?</span>
</a>
</li>
</ul>
The span element - icoMore contains a background image - which I'd like to respond to the full width of thebootstrap parent - I have tried the following code -
.icoMore{background:url(../img/logos%20and%20icons/Wanttoknow_Icon_Off.png) no-repeat; min-width:100%; min-height:auto; display:block; }
But it displays at zero width and height - can anyone advise a solution?
Add display: block to span. It should be enough.
You'll need to add any character into your <span>, even a space, like:
<span> </span>
Check this fiddle:
http://jsfiddle.net/dimaspante/5j6vt0mk/
I have bootstrap navigation pill that shows text and an arrow. Unfortunately if the text is to long the arrow appears on the border of the anchor. Html looks like this.
<a href="#">
<span> Some longer sample text</span>
<i class="pull-right icon-chevron-right"></i>
</a>
Demo is here: http://jsfiddle.net/kyrisu/FNcGX/
How can I display it inline with the block of text (text can/should wrap)?
If your text can wrap as you said then this can work..
<span><i class="pull-right icon-chevron-right"></i>Some longer sample text</span>
Update:
<span class="iwt">
<span>Some longer sample text</span>
<i class="pull-right icon-chevron-right"></i>
</span>
.iwt{
display:block;
}
Please use this structure
<a href="#">
<i class="pull-right icon-chevron-right"></i>
<span> Some longer sample text</span>
</a>
Please demo http://jsfiddle.net/FNcGX/9/
Using css white-space:nowrap; solves text in one line issue.
.subject-pill > a {
border-style: solid;
border-width: 1px;
white-space:nowrap;
}
.subject-pill{
width: 218px;
}
reference site :
white space no wrap