I created piece of code. In span class mean-head increase horizontally if the text of the span increase. I want to fix it's width for like 30 characters. After that text so go to new line.
EXAMPLE FIEDLE
<span class="top-head"> Recommended URLs </span>
<div class="c1">
<div class="item">
<div class="image">
<img class="media-object" src="http://deathandtaxesmag.wpengine.netdna-cdn.com/wp-content/uploads/2014/02/Screen-Shot-2014-02-27-at-12.39.17-PM.png" >
</div>
<div class="descriptionContainer">
<span class="main-head"> Mashable - Business </span>
<span class="min-head">Title of link Title of link Title of link Title of link </span>
<span class="subcont">
<span class="fa fa-retweet"> RT 100+ | </span>
<span class="fa fa-twitter"> Tweet 100+</span>
</span>
</div>
</div>
</div>
Give fixed width for span class and add display block
.min-head { width:150px; display:block}
Will this help you?
span.min-head {
display: block;
font-size: 9px;
margin-top: 1px;
max-width: 130px;
white-space: pre-wrap;
}
Check the fiddle HERE
Related
I am trying to view a Name and rating value and a star in a single line but I am thinking of if the name gets larger than the star and rating must move collectively to the next line but in my condition it first rating moves then star, is there any possible solution that if moving to next line then both star and rating value
like
Abdul* 4.5
if get more then
Abdul Wahab
*4.5
if bigger then
Abdul Wahab
amir *4.5
<p className="Bold mb-0 FS_16 Black" style={{fontSize: "100%"}}> Any name
<span>
<img src={Star} alt="" className="mb-2 p-1" />
<span className="Bold FS_16" style={{ color: "yellow" }}>{props.Rating}</span>
</span>
</p>
if moving to next line then both star and rating value
Looks like you just need your rating to be solid block, so, you can force it to be solid with
<p className="Bold mb-0 FS_16 Black" style={{fontSize: "100%"}}> Any name
<span className="rating">
<img src={Star} alt="" className="mb-2 p-1" />
<span className="Bold FS_16" style={{ color: "yellow" }}>{props.Rating}</span>
</span>
</p>
.rating {
display: inline-block
}
Or you can use display: inline-flex or whatever is better for your current layout and styling. You can also post your CSS, it will be easier to help you
A p element is a block element, it covers the whole width of its container and adds an inline box to its body where it can place inline elements. span and img elements are inline elements. Inline elements are subject to line-wrapping and you can place inline elements inside each other.
Solution: wrap the parts of the content where you DO NOT want line-breaking inside a span and set its css property white-space to nobreak. This content will then never line-break but this entire wrapping span, seen as an compund inline element in its surrounding may still break relative to other content in the surrounding box.
Check my primitive but meaningful samples and verify that the star and rating never separates with a line-break.
.container { text-align: center; background-color: lightgreen; border: 1px solid black; }
.w25 { width: 25px; }
.w50 { width: 50px; }
.w100 { width: 100px; }
.w150 { width: 150px; }
.w200 { width: 200px; }
.nobreak { white-space: nowrap }
<html>
<body>
<div class="container w25">
<p>
<span>This is a name</span>
<span class="nobreak">
<span>☆</span>
<span>4.5</span>
</span>
</p>
</div>
<div class="container w50">
<p>
<span>This is a name</span>
<span class="nobreak">
<span>☆</span>
<span>4.5</span>
</span>
</p>
</div>
<div class="container w100">
<p>
<span>This is a name</span>
<span class="nobreak">
<span>☆</span>
<span>4.5</span>
</span>
</p>
</div>
<div class="container w150">
<p>
<span>This is a name</span>
<span class="nobreak">
<span>☆</span>
<span>4.5</span>
</span>
</p>
</div>
<div class="container w200">
<p>
<span>This is a name</span>
<span class="nobreak">
<span>☆</span>
<span>4.5</span>
</span>
</p>
</div>
</body>
</html>
I've a html page with two span tag's which displays the same content but nested in a div with different class name:
<div class='class1'>
<span class='test-icon'>1</span>
</div>
<div class='class2'>
<span class='test-icon'>2</span>
</div>
Is there a way i can show only one <span> at a time based on the nested class, e.g. i've tried with the div.class1 span.test-icon {display: none}but it hides both.
You didn't close your span tags!
Here you are:
.class1 .test-icon{
display: none;
}
/*.class2 .test-icon{
display: none;
}*/
<div class='class1'>
<span class='test-icon'>Hola</span>
</div>
<div class='class2'>
<span class='test-icon'>Adios</span>
</div>
This seems to work as it should:
div.class1 span.test-icon {display:none;}
<div class='class1'>
<span class='test-icon'>Span 1</span>
</div>
<div class='class2'>
<span class='test-icon'>Span 2</span>
</div>
I'm trying to align two divs horizontally inside my HTML: the first one contains an image and the second a text, and this is the used code:
<div style="float: left; width: 55px;">
<img src="../img/look.svg" alt="">
</div>
<div style="display: inline-block;">
<span> Look for cases </span>
<span> from people near you. </span>
</div>
I tried many methods, but I've been unable to get the text line in the same level as the image vertical axis, and the text inside the second div gets displayed very far from the image vertically.
So, is there any possibility to fix that?
The problem is with the float. The vertical-align: middle; line-height: 1; will fix the issue:
div {
display: inline-block;
vertical-align: top;
line-height: 1;
}
div:first-child {
width: 55px;
}
<div>
<img src="//placehold.it/50?text=DP" alt="">
</div>
<div style="display: inline-block; vertical-align: middle; line-height: 1;">
<span> Look for cases </span>
<span> from people near you. </span>
</div>
Preview
Top Alignment:
Middle Alignment:
The vertical-align decides the vertical alignment. If you want the image and text to be on the same line, use vertical-align: top.
A few things first:
don't use inline styles
don't mix float with inline-block
Option 1: using flebox
section {
display: flex;
gap: 10px;
}
<section>
<div>
<img src="//dummyimage.com/55x55" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
</section>
Option #2 using inline-block
div {
display:inline-block;
vertical-align:top;
margin-right:10px
}
<div>
<img src="//dummyimage.com/55x55" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
Option #3 using float
div {
float: left;
margin-right:10px
}
<div>
<img src="//dummyimage.com/55x55" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
flexbox to the rescue.
I added your divs inside another one, which will align its items. In my CSS my image has 100px so I changed the width to 100px. Change yours accordingly.
.halign {
display:flex;
align-items: center;
}
<div class="halign">
<div style="width: 100px;">
<img src="http://lorempixel.com/100/100/" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
</div>
Try to seprate the CSS and HTML and do not mix display:inline-block with float:left. Also use clear:both after both div
<style>
.fisrstDiv {
float: left;
display:block;
}
.secondDiv {
float: left;
display:block;
}
.clear {
clear: both;
}
</style>
HTML
<div class="fisrstDiv">
<img src="//placehold.it/50?text=DP" alt="">
</div>
<div class="secondDiv">
<span> Look for cases </span>
<span> from people near you. </span>
</div>
<div class="clear"></div>
I have a footer in which I have different icons for my social media. Now, I want to create a hover effect, which displays the name of hovered icons.
For example: My mouse is over the facebook icon, and then the text 'Facebook' should come up in a div, located in a div below!
I know how to create this, however, I don't know how I display these names in the same div at the exact same place. How can I do this?
<div id="footer1" style="position: fixed; bottom: 0;">
<div class="content-wrapper">
<div class="ft-div-left"> </div>
<div class="ft-div-right">
<p></p>
</div>
<div class="ft-div-middle">
<center>
<p>
<center>
<span class="" style="color: white;"></span>
<span class="" style="color: white;"></span>
<span class="icon-stumbleupon3" id="issuu" style="color: white;"></span>
<span class ="icon-twitter3"></span>
</br>
<br>
<br>
<span style="font-family:'Open Sans',sans-serif; font-size:11px; color:grey;">© 2014. All Rights Reserved.</span>
</center>
</p>
</center>
</div>
<div id="hoverText">
<span>Here goes the text</span>
</div>
</div>
</div>
I personally use the title="" tooltip inside whatever tag I am using.
<div id="hoverText">
<span title="hover text">Here goes the text</span>
</div>
This title="" tooltip seem to work about anywhere and on anything.
I'm assuming a CSS only answer was what you are looking for.
You can do this with CSS using visibility and ofcourse :hover
Here's the Jsfiddle
Example:
Html-
<div id="facebookicon">
<img src="https://www.facebookbrand.com/img/assets/asset.f.logo.lg.png"> </img>
</div>
<div id="onhoverfb">Follow Us</div>
CSS -
#onhoverfb{
visibility: hidden;
}
#facebookicon:hover ~ #onhoverfb{
visibility: visible;
}
Remember to set the :hover on the div that is going to be hovered over.
Extra: You can always add the css transition property to have the hover appear more smoothly. Like a fade in.
I'd like to center a vertically aligned button in a div using bootstrap
<div class="row" >
<div class="col-xs-2">
<button class="btn" style="color: #660066;">
<i class="fa fa-arrow-left" data-ng-click="onClickBack()" ></i>
</button>
</div>
<div class="col-xs-10">
<h4> {{rootNode.nodeName}}</h4>
</div>
</div>
As you see, I have two columns,one containing a button in the left, another containing Label. When label.length is increased then the div'll change the height -> I want the button to be always centered in the div.
You can use display:inline-block and vertical-align:middle:
.col-xs-2, .col-xs-10 {
display: inline-block;
float: none;
}
.col-xs-10 {
vertical-align: middle;
}
Here's a demo fiddle.
Though you will have to make sure to remove the white space in between the column <div>s in your markup. Refer to this answer for more information on that.
I used this. Check the "style property". That will do the trick.
style='position: absolute;top: 50%;left: 50%;margin-right: -50%;transform: translate(-50%, -50%)'>
<span class='glyphicon glyphicon-refresh spinning'>
</span> Loading...</button>
The problem is that the padding on the H4 is more than the button. You can wrap you button inside the H4 (perhaps not the best practice), or change the button padding in your CSS..
<div class="row">
<div class="col-xs-2">
<h4>
<button class="btn" style="color: #660066;">
<i class="fa fa-arrow-left" data-ng-click="onClickBack()"></i>
</button>
</h4>
</div>
<div class="col-xs-10">
<h4> {{rootNode.nodeName}}</h4>
</div>
</div>
OR, leave the button as is, and apply this CSS to the H4..
h4 {
margin-top: -0.5em;
}
http://bootply.com/106259