I did a thumbnail with some images . I'm using bootstrap.
Below each image I want to put a title .
The problem is when the title is too large, it breaks to a second line , making the thumbnail become disorganized .
I wonder if there is any way to do the following rule ...
If the title be greater than the width of the picture it displays "..." and when you hover over it displays any title .
<div class="col-xs-4">
<div class="thumbnail">
<img style="width: 150px; height: 150px" src="#Html.DisplayFor(modelItem => item.IMAGE)" alt="imagem" class="img-responsive">
<p>#Html.DisplayFor(modelItem => item.TITLE)</p>
</div>
</div>
Edit
Solution:
Using:
p.classname{
white-space:pre;
overflow:hidden;
text-overflow: ellipsis;
width: 200px;
}
p.classname:hover{
text-overflow: inherit;
overflow: visible;
}
In short and general, you get the automatic ellipsis by using these CSS properties:
white-space:pre;
overflow:hidden;
text-overflow: ellipsis;
(This requires you to have a width constraint on your caption so that it won't be wider than your image in the first place.)
You could do this with a pseudo element :after
.yourElement:after {
content: "...";
display: inline-block;
}
works IE7+
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.
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>
This is the example:
I want to align the image along side with the name but somehow the image just floats up a little higher. Any help?
UPDATE:
#profile_name_header {
background-color: #006400;
font-family: Century Gothic;
color: #FFFFFF;
font-size: 20px;
padding-bottom: 12px;
padding-top: 12px;
padding-left: 10px;
}
<div id="profile_name_header">
<img src=< ?php echo "./img/".$genderprofile. ""; ?> style = "height:30px; margin-bottom:0px;" >
<?php echo $fullname; ?>'s Profile
</div>
Thank you.
Use vertical-align on the img since it's adjacent inline content.
img {
vertical-align: middle;
}
<img src="https://lh4.googleusercontent.com/-EK1g7sBpX74/AAAAAAAAAAI/AAAAAAAAABU/AzsjRnL3mKk/photo.jpg?sz=32"> #Dranreb
A fancier way is to use flexbox, but it's overkill for your use case. If you wanted to do that, just give them a parent, and use align-items to affect vertical alignment.
div {
display: flex;
align-items: center;
}
<div>
<img src="https://lh4.googleusercontent.com/-EK1g7sBpX74/AAAAAAAAAAI/AAAAAAAAABU/AzsjRnL3mKk/photo.jpg?sz=32"> #Dranreb
</div>
There is a CSS Property called vertical align, which can be used to align several html elements in respecr to the text baseline. I'd suggest you set it to center, but try and see what fits best.
(Some further reading about the conflicts among devs.)
Assign one class name to the image. For e.g.
<img class="backgroundImg" src="images/bg.jpg" />
Then use these css properties:
.backgroundImg {
position: relative;
top: 5px; // or 10px
}
Based on your text leveling, just adjust the "top" value.
Note:You can also use "id" and assign the same css properties.
Try this code with proper HTML Markup......
*{
margin: 0;
padding: 0;
}
figure{
width:620px;
display: block;
margin:0 auto;
}
figure img{
display: block;
width: 100%;
height: auto;
}
figcaption{
text-align:center;
}
<figure>
<img src="https://unsplash.it/600/280" alt="">
<figcaption>
<small>Image Caption goes here</small>
</figcaption>
</figure>
I've created an page where users can view images along with the image description although I'm having some issues with the CSS for the description. The description is retrieved via PHP and is shown as a echoed variable. The issue with this is that the descriptions seems to carry on along one single line when it should be carrying on within the div.
As shown below, it displays along one line when it should be wrapping below to the same width as the text area below the description.
I've tried changing the width of the .desc class to a set pixel width of 290px instead 100% (should still take the 290px from the image-desc class container) but I'm having no luck.
My current CSS:
.image-info {
width: 290px;
display: inline;
float: right;
}
.image-info .desc {
text-align: justify;
width: 290px;
margin: 10px 0px;
}
and the HTML:
<div class="image-info">
<? $desc = htmlentities($row['desc'], ENT_QUOTES, 'UTF-8'); ?>
← Back to Gallery
<div class="desc"><? echo $desc; ?></div>
<? if(empty($_SESSION['user'])) { } else { print '<i class="icon-chevron-down"></i>Options<br /><div class="slidingDes"><form action="admin/includes/edit-img.php?id=' . $id . '" method="post"> <textarea type="text" name="description" placeholder="' . $desc . '"></textarea> <br/><input type="submit" value="Change" class="btn btn-primary"/> </form><form action="admin/includes/cover-image.php?id=' . $id . '" method="post"> <input type="submit" value="Cover Photo" class="btn btn-danger"/> </form></div>';}?>
</div>
It seems that your content go beyond the limit when there is no white space in the word
so just add word-wrap:break-word; to imageInfo class
here is your css
.image-info {
width: 290px;
display: inline;
float: right;
word-wrap:break-word;
}
Take a look here in fiddle
Add the new CSS 3 word-break property:
word-break: break-word; /* Will prevent text from bleeding outside container */
Use the CSS3 word wrap
word-wrap:break-word;
This will force the text to go down
Is it possible to center an image only trough setting a class to the img tag without side effects? The problem is the following: I have an anchor around an image. If I use the following CSS
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
And this (stripped down) HTML:
<a href="/path/to/image.jpg" class="fancybox" rel="fancybox" title="System">
<img src="/path/to/image.jpg" title="System" class="aligncenter">
</a>
the link takes the whole width of the main div. This means not only the image is clickable - also the space around the image (actually the whole width) is clickable. This is through the CSS display: block.
How can I center an image without using a parent div? I don't want the whole area clickable.
Background:
You can read this topic. It is about Wordpress and the built in editor. He automatically generates the class aligncenter on an image (if the user pressed the center button). I need this for my own theme. According to the moderators there this should be only a CSS question and doesn't have to do with changing code in Wordpress.
in aligncenter class add text-align:center
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
text-align:center;
}
I'm not familiar with wordpress, but you might want to try setting the image's and the anchors's css 'display' property to 'inline-block'.
If you are limited in changing the document's DOM, another option is adding an 'onClick' attribute to the image.
This will allow you to run some function once the image is clicked.
So, for example, if you want to redirect to another page:
<img src='myImg.png' onclick='myRedirect()' style='cursor:pointer'/>
And in the page's header:
<script type='text/JavaScript'>
var myRedirect = function(){
window.location.href = 'Some other location';
}
</script>
Notice the style='cursor:pointer', which changes the mouse's cursor to a 'hand' cursor.
To avoid an additional div container or even JavaScript, you can make the anchor display as a block:
.logo {display: block; height: 115px; margin: 0 auto; width: 115px;}
/* height and width must equal your image's values */
<img src="logo.png" alt="Logo" />
Live demo: http://jsfiddle.net/performancecode/Ggk8v/
it still incorporates a div, but the way i do it is:
<div class="megaman">
<img src="img/megaman.jpg" alt="megaman">
</div>
img {
height: 125px;
width: 200px;
}
.megaman{
text-align: center;
margin: 0 auto;
display: block;
}
And yes, I replaced .logo with .megaman because megaman rocks! But it should work. I couldn't figure it out without using a div.
The solution I found. Adding /></a> and width and height to the anchor tag cuts down the hyperlink to the image...
<a class="link" href="URL" target="_blank"> <img width="75px" height="75px" alt="Facebook" src="IMAGE LOCATION"/></a>
Second answer:
paste this in functions.php
add_filter('image_send_to_editor','give_linked_images_class',10,8);
function give_linked_images_class($html, $id, $caption, $title, $align, $url, $size, $alt = '' ) {
// only do this on center
if($align == 'center') {
$html = str_replace('aligncenter', '', $html);
$html = '<p style="width: 100%; text-align: center;" >'.$html.'</p>';
}
return $html;
}
Down side, this won't effect already inserted images...
Also if you can please move the style of the <p> to the stylesheet.