I have the product name and pricing as separate spans insides a link to work properly with Rich Snippets. Some products have larger length names than others so I'm truncating the length so it fits the box I have. Previously this was done on the server but I'd prefer to have it handled with CSS so any changes to the design doesn't involve the backend pages changing.
The problem is I cannot make the spans line up next to each other. With tinkering the display attribute, the text-overflow property does not work. The problematic code is below:
HTML:
<div class="details" itemscope itemtype="http://data-vocabulary.org/Product">
<h2>
<a class="heading" href="/product/acmesw" title="Acme Super Widget">
<span class="trunc" itemprop="name">Acme Super Widget 3000</span>
<span itemprop="offerDetails" itemscope itemtype="http://data-vocabulary.org/Offer">- <meta itemprop="currency" content="AUD" /><spanitemprop="price">$199.95</span></span>
</a>
</h2>
CSS:
.details {
width:300px;
border:1px solid red;
}
.trunc {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width:60%;
}
h2 span {
display:inline-block;
}
jsFiddle here: http://jsfiddle.net/c7p8w/
Hard to answer because your fiddle doesn't show the problem. You should be able to fix the issue by giving both spans the same vertical-align setting. Try giving them both vertical-align:top;.
Edit: Ah, I see the issue in IE.
Working fiddle here: http://jsfiddle.net/c7p8w/1/
Related
I'm outputting a list of file names with total views (tally) beside them.
I'm trying to get the tally to overflow the file name.
..So with a file / tally list like:
ejs-2015-participants-list 125,000
koh-hammertown-pics 20
slaughterhouse-co-summer-run 100
..I'm trying to get the result of:
ejs-2015-participan...125,000
koh-hammertown-pics 20
slaughterhouse-co-summe...100
The HTML / CSS (html5 / css3) has a structure like:
<style>
.box {width:200px;}
.box span {float:left;}
.box div {float:right;}
</style>
<div class="box">
<span>ejs-2015-participants-list</span><div>125,000</div>
<span>koh-hammertown-pics</span><div>20</div>
<span>slaughterhouse-co-summer-run</span><div>100</div>
</div>
I'm not particular about the elements used other than 'box' is repeated so it needs to be a class. If the structure won't work or you'd rather use another selector in your example, feel free. The solution does need to validate and work in consortium compliant browsers (not worried about IE).
I've tried various inline and block level elements with various style including:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Nothings working though - any ideas?
Tables would make the left side the same length for all rows.
You can totally get the effect you're looking for using flexbox (and for broader browser support fall back to a table solution). The idea here is that the price is the full width of its text, say "$500", and the rest of the space is filled by the item name, which has the three rules text-oveflow, overflow, and white-space that you mentioned.
Codepen:
http://codepen.io/tholex/pen/wKQPEV
HTML:
<div class="item">
<div class="name">Delicious Bagels</div>
<div class="price">$500</div>
</div>
CSS:
.row {
display: flex;
}
.name {
flex-grow: 1;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.price {}
So I used a table for this, since it helps with alignment of the data and is semantically correct. No need to mess with floats.
The trick is really in the CSS. Set a max width, text-overflow of ellipsis, and don't allow word break. The actual ellipsis trick doesn't need to be in a table - any block level element can handle it.
Here's the codepen: http://codepen.io/anon/pen/bVQYWJ
CSS
.table td {
text-align: right;
}
.table th {
text-align: left;
}
.table th {
display: inline-block;
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
HTML
<table class="table">
<tr>
<th>ejs-2015-participants-list</th>
<td>125,000</td>
</tr>
<tr>
<th>koh-hammertown-pics</th>
<td>20</td>
</tr>
<tr>
<th>slaughterhouse-co-summer-run</th>
<td>100</td>
</tr>
</table>
The simple answer is your .box is too small to contain the div so it drops down. One solution is to make it wider but you have other problems.
Your span is an inline element while the div is block level. I don't know why you do it that way but you should probably contain those two inside their own div so one doesn't overflow into the other.
<div class="box">
<div>
<span> stuff </span><div>125,000</div>
</div>
...
Though it seems to me you should turn the div with the number into a span also. Then everything is inline.
In a subnavigation of a Website I try to have the link Suite «Mont Blanc», which was read out of the Backend to be wrapped like this:
Suite
«Mont Blanc»
And not:
Suite «Mont
Blanc»
I know there is but if I insert that in the Structure-Element Name (which is listed as a link), the link will not work properly anymore.
Is there a kind of invisible non-breakable space I could use?
Use like this: Demo
CSS:
span{
white-space: nowrap;
}
HTML:
Suite
<span>«Mont Blanc» </span>
EDIT:
If you need span content in next line You can try like this: Demo
span{
clear:both;
display:block;
white-space: nowrap;
}
Use CSS to prevent wrapping:
white-space: nowrap;
You could wrap it in a span like this:
Suite<br />
<span style="white-space: nowrap;">«Mont Blanc»</span>
The white-space: nowrap; CSS prevents wrapping, even if the outer div is smaller than the text.
I have a html code where I want to store long paragrapsh of information. The only issue is that in my code I don't want hundreds of sentences on just one line. Id rather see it formatted like:
<div id ="sidebar">
<div><b> Things to take into account: </b></div>
<div>
<p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</p>
</div>
</div>
However, when I do it this way and run my website the words run outside the container they are in
Can you help give me a way to display it this way in the code while keeping the words inside it's container?
my css:
#sidebar {
"background-color: #eee;
height: 200px;
width:350px;
float:left;
margin-top: 30px;
margin-left: 30px;
border: 1px solid black;
border-radius: 5px;
display: block;
}
UPDATE: changed X to words and fixed it. Weird but ok lol
Your issue is that xxxxxxxxxxxxxx is considered one word and by default the browser won't break this word.
adding
word-wrap:break-word;
Will fix this, but I would guess once you use actual text in there it will break more naturally since it won't be a single word of so many characters.
fiddle: http://jsfiddle.net/ktbypbtt/
Here is another fiddle without the word-wrap, but with actual text.
http://jsfiddle.net/ktbypbtt/1/
Notice how it breaks itself since the browser will naturally wrap the word after each word if it hits the end of the div, but needs to be specifically told to break words.
Just add a <br> tag where ever you want the text to go to the next line
<div id ="sidebar">
<div><b> Things to take into ACCOUNT: </b></div>
<div>
<p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
</p>
</div>
</div>
Helpful? Let me know :)
add some css.
#sidebar{
display: block;
}
or add a class to your wrapping div and do the same thing with setting display as block
edited
You could cut off the overflow:
#sidebar{
overflow: hidden;
}
http://jsfiddle.net/5deyo1tb/
I'm trying to truncate the text that displays from an <a> tag but it isn't working. I applied the styling to other tag styles and it did work (none of the examples I saw used an <a> tag either). I was wondering if someone could explain to me why this is happening (I'm not the best at HTML/CSS) and help me get it working. Here is my code.
If it helps to know I'm also using .less.
CSS:
.blockTrunc{
width: 30px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
HTML:
<a class="blockTrunc" href="#" >
<i class="icon " ></i>{{{this.foo}}}: test length adder <span>{{this.bar}}-{{this.fizz}}</span>
</a>
You can't apply text-overflow: ellipsis; to inline elements. You can change the a to display: inline-block; and it should then work.
CSS:
.blockTrunc{
display: inline-block;
width: 30px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
JS Fiddle: http://jsfiddle.net/z6cm4gcw/
W3 text-overflow docs states:
Applies to: block containers
So, you'll have make it a block container, either setting it's display property as a inline-block or block.
Updated JsFiddle
i've resolved wrapping your "A" element with a DIV with the class you have used:
<div class="blockTrunc">
<a href="#" >
<i class="icon " ></i>{{{this.foo}}}: test length adder <span>{{this.bar}}-{{this.fizz}}</span>
</a>
</div>
http://jsfiddle.net/z6cm4gcw/
I'm very new to the whole responsive web design and I'm building simple todo app to learn with angularJS. My trouble now is how can I handle text that is too long and breaks the layout.
Here you can see how it breaks.
The HTML&CSS is now :
note: This is wrapped with <div class="span12">
<li>
<div>
<span class="taskshorter">{{t.TaskName}}</span>
<div class="pull-right">
<span class="label label-info ">{{t.EstimatedTime}}</span>
<span class="label label-important">{{t.EstimatedTimeLeft}}</span>
<i class="icon-chevron-right"></i>
</div>
</div>
</li>
and CSS
.taskshorter {
overflow: hidden;
white-space: nowrap;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
width: 20px;
height: 1.2em;
}
But it dosen't seem to work. Should I rather write javascript code to clip the text or Am I missing something that can be easily fixed?
Also I'm using Twitter boostrap fluid layout.
You can't set width on an inline element. Add display:inline-block to the CSS.
A not-so-clean, but easy workaround would be to give the right element the same background as the main page.
.pull-right {
background-color: blue; /* your bg color */
float: right;
box-shadow: -2px 0 4px blue; /* just for smoother "cut" */
}
I haven't tested it, might need some more adjustments. If you put an example into JSFiddle, I could adjust it.