I am creating a tumblr theme and when you hover over a photo post it shows a description (example description shown below).
The designer only wants the first three lines of the description to show and place ellipses after after the description if it overspills 3 lines.
What's the best way of going about this considering that a character count isn't a good enough?
Thanks for the help...
http://brendan-rice.tumblr.com/
Example Photo Post
<div class="description photo" style="background-color: rgb(82, 69, 99);">
<div style="">
<input type="hidden" value="22186233340" class="id">
<span class="title" style="">
<p style="">
staff:
</p>
<blockquote style="">
<p style="">
<strong style="">Attention West Coast:</strong> Check out our official Tumblr meetup in Los Angeles on Tuesday 5/1! RSVP here.
</p>
</blockquote>
<p style="">
(Source: <a title="meetups" href="http://meetups.tumblr.com/post/21804989817/were-gonna-be-in-la-tuesday-night-come-grab-a" style="">meetups</a>)
</p>
</span>
<div class="actions" style="">
<span style="float: left;">
<a target="_blank" href="http://www.tumblr.com/follow/penguinenglishlibrary " class="follow" style="">
Follow </a>
</span>
<span style="float: right;">
<a target="_blank" href="http://www.tumblr.com/reblog/22186233340/Pw5OgVj1" class="reblog" style="">
Reblog </a>
</span>
<span style="float: right;">
<a target="_blank" href="http://www.tumblr.com/reblog/22186233340/Pw5OgVj1" class="like" style="">
Like </a>
</span>
</div>
</div>
</div>
EDIT: just found this: http://dotdotdot.frebsite.nl/ which should solve your issue (jquery plugin)
As far as I know there is no way to make it wrap to three lines and then ellipsis.
If you just want the ellipsis after 1 line, use:
.class{
width:200px;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
However, you can do some tricky css to emulate it, though it won't be perfect 100%. I've attached a jsfiddle with the emulation: http://jsfiddle.net/ET3F8/
Essentially, its wrapping to 3 lines and then becoming hidden. There is an element containing the ellipsis text ("...") which is positioned at the bottom right of the container. It will cover the text and emulate ellipsis.
Issues:
- It will always display. You could perhaps use some JS to hide it if the text is not overflowing.
- It sometimes will break a letter.
Anyway, just an idea!
Just use text-overflow: ellipsis, but you'll need to fix the width of whatever it is you want the content restricting on. Something like:
.myClass
{
width: 200px;
text-overflow: ellipsis;
}
Does this CSS meet your needs?
text-overflow: ellipsis;
You're bound to a specific height but does the trick for me.
.description .title {
height: 3.7em;
overflow: hidden;
}
Related
I am trying to use JS Affix to keep 2 blocks in a sidebar column staying fixed on the page.
Upon scrolling, the width of the sidebar is expanded a bit and the expanded portion overlaps the main body column.
I have tried manually setting div widths and using percentages, but all changes I make end up having same behavior.
Here is the relevant code:
<div class="menu block tile-default" id=sidebarmenu" data-spy="affix" data-offset-top="195" data-offset-bottom="300" style="border:0px;">
<img src="/img/sidebar-top.png" class="img-responsive" alt="sidebar image">
<div class="pad">
<ul class="nav nav-pills nav-stacked">
#include('partials/menu')
</ul>
</div>
<div style="background-color: white; height: 10px; border:0px"></div>
<div class="pad" style="border: 4px solid orange; background-color: #1d6899; color: ghostwhite">
<a href="https://zoom.us/webinar/register/Pt9LgDTBR828OXIHOfTLPQ" class="thumbnail" target="_blank">
<img class = "img-responsive" src="/img/img.png" alt="...">
<div class="caption">
<h5 class="text-center">Some Caption</h5>
</div>
</a>
</div>
</div>
You can see what I am talking about here:
https://guitar-dreams.com/guitar-lesson/triad-arpeggios-2-strings/20
There it might be easier to follow the CSS as well.
Notice how when you scroll down, the navigation menu and the block below it expand to the right a bit and overlap the main body. This problem only manifested after I added the 2nd block below the menu.
I have read a lot about strange affix behavior so maybe this is just instance where affix is not ideal solution. In any case, wondering if there is some glaring problem causing this that is readily fixed. Me being a guitarist trying to do some basic coding I am sure I am overlooking something obvious!
Thanks!
Brian
I've been using Materialize on my cards and want the titles to truncate.
I tried to use the simple code example materialize has on their website but it won't work. Here is my example:
<div class="card hoverable waves-effect waves-light">
<div class="card-image" id="house-pic" style="height: auto;">
...
</div>
<div class="card-content" style="padding-left: 0px; padding-right: 0px;">
<span class="detail truncate card-title activator" style="font-size: 17px;">{{house.address}}</span>
</div>
<div>
I also use the min.css and js libraries on their website. It seems simple enough, but the cards just stretch if the text is too long. Please let me know if you have any ideas, thanks.
I'm not sure where exactly in your code is the problem so I'm guessing:
I supposed the card is stretching because of the text being too long in this section:
<span class="detail truncate card-title activator" style="font-size: 17px;">{{house.address}}</span>
I would replace span element with a div element like so:
<div class="detail truncate card-title activator" style="font-size: 17px;">{{house.address}}</div>
Because span is an inline element vs div which is a block element.
An inline element does not start on a new line and only takes up as
much width as necessary.
vs
A block-level element always starts on a new line and takes up the
full width available (stretches out to the left and right as far as it
can).
Necessary vs available :D
I am in need of help. I am currently developing my new webstore for my website, and I cannot figure out ho to properly align my text, images and buttons. I have tried many things in order to align them, but I cannot seem to figure out how to do it myself. I'll provide more info if needed. Thanks in advance!
Here is my code and below you can see the result:
Assuming that you just want to align all the items vertically, you can simply give the container a value of text-align:center while giving the containing block a width. So for the purpose of your code it would be something like this. Not that I've changed your markup as you were using inline styling.
The wrapper I've set as display:flex to help it align nicely. You can read about flexbox here
HTML:
<div class="wrapper">
<section>
<h2>MVP</h2>
<img class="img-rounded" style="float: left;" title="" src="//dunb17ur4ymx4.cloudfront.net/packages/images/d04fbf5918208479df283e7fa0ad8f0fcc0d7acb.png"/>
<button>helpme</button>
</section>
<section>
<h2>MVP</h2>
<img class="img-rounded" style="float: center;" src="//dunb17ur4ymx4.cloudfront.net/packages/images/f6f9b85569cc52ddc9bf5e57b4fd28309093fdcc.png"/>
<button>helpme</button>
</section>
<section>
<h2>MVP</h2>
<img class="img-rounded" style="float: center;" src="//dunb17ur4ymx4.cloudfront.net/packages/images/f6f9b85569cc52ddc9bf5e57b4fd28309093fdcc.png"/>
<button>helpme</button>
</section><
</div>
CSS:
.wrapper section {
text-align:center;
justify-content:center;
width:200px;
}
.wrapper {
display:flex;
}
Fiddle
I'm trying to wrap text to fit inside it's parent element however I'm having issues with the text as seen in the below image.
On the left side, the word 'Against' is broken up and is harder to read though on the right side, the single word is too long and so is correctly broken up to fit within it's parent. Here is the code to support this:
HTML:
<li>
<div class="icon">
<h5>D</h5>
</div>
<p class="label">Defending Ourselves Against Infectious Diseases</p>
</li>
<li>
<div class="icon">
<h5>D</h5>
</div>
<p class="label">DefendingOurselvesAgainstInfectiousDiseases</p>
</li>
CSS:
.label {
word-break: break-all;
}
I would preferably like the left side to display the text without breaks and the right side to display with breaks (and a hyphen to show that it is broken) as the word is too long.
A CSS solution would be better though I think the only way to solve this is with Javascript. How would I fix this text issue?
EDIT
Also, I cannot just use a <br> tag because I would like this to apply to many other elements like this.
Replace the word-break rule with word-wrap: break-word.
li {
max-width: 200px;
word-wrap: break-word;
}
<ul>
<li>
<div class="icon">
<h5>D</h5>
</div>
<p class="label">Defending Ourselves Against Infectious Diseases</p>
</li>
<li>
<div class="icon">
<h5>D</h5>
</div>
<p class="label">DefendingOurselvesAgainstInfectiousDiseases</p>
</li>
</ul>
Use word-wrap instead of word-break.
If you have to cut some extra texts then there is
text-overflow:ellipsis;
word-wrap: break-word; (Only in IE7)
I found a good Article:
http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
http://www.impressivewebs.com/word-wrap-css3/
JS
<div id="myDIV">GIVE YOUR TEXT</div>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("myDIV").style.wordWrap = "break-word";
}
</script>
I'm using highchart graphs to display time and event of specific person. But I don't understand which graph to use.
Following image is the example. I want to do the same.
This is a simple example which only uses css and html. It is very limited but functions (fixed width tool tips etc). You could easily make it more flexible, it is just to show it is possible.
<div class="list">
<div class="period">...</div>
<div class="period">15/5
<span class="tool-tip">info</span>
</div>
<div class="period">16/5/2015
<span class="tool-tip">info 2</span>
</div>
<div class="period">17/5
<span class="tool-tip">fixed width</span>
</div>
<div class="period">18/5</div>
<div class="arrow-right"></div>
</div>
.period{
float:left;
position:relative;
display:inline-block;
...
}
.tool-tip{
height:35px;
line-height: 25px;
position: absolute;
...
}
Main thing to be aware of is that each section is an inline box, then the tool tip is located relative to it.