Is there any CSS workaround to make the pdf/doc/ppt icon always sit at the end of text line, without using a background image? When there is not enough space for the icon image, it will sit in second line alone. I'm wondering if there is anything similar as white-space:nowrap?
<ul>
<li>
Lorem Ipsum is simaorem Ipsum. (3MB, PDF)
<img src="images/pdf.gif" />
</li>
</ul>
<ul> has a fixed width.
Images are text, or “inline content,” from the perspective of layout. Thus, you can use same techniques as for preventing line breaks in text. The nobr markup prevents line breaks and works universally in browsers, though standards-writers have frowned upon it. If needed you can use its standardized, less reliable, more verbose sister: white-space: nowrap in CSS, together with some inline markup like span.
Here the problem is that you would need “overlapping” markup: ... (3MB, <nobr>PDF)</a><img ...></nobr> (i.e., open a nobr element inside the a element but close the a before nobr). While this works, it violates HTML syntax rules, so I’d suggest that you move some text out of the a element (it probably does not need to be there):
Lorem Ipsum is simaorem Ipsum. (3MB, <nobr>PDF)
<img src="images/pdf.gif" alt=""></nobr>
or
Lorem Ipsum is simaorem Ipsum. (3MB, <span
style="white-space: nowrap">PDF) <img src="images/pdf.gif" alt=""></span>
You can add an inline child to your list item and give it a background image.
<ul>
<li><span class='bg'>Lorem Ipsum is simaorem Ipsum. (3MB, PDF)</span></li>
</ul>
...
li .bg {
background-image: url(...);
background-repeat: no-repeat;
background-position: 100% 100%;
padding-right: 24px
}
See a demo here: http://tinkerbin.com/qbwNWFBb
ul li a:after {
content: url('http://placekitten.com/16/16');
}
Related
This question already has answers here:
Align child elements of different blocks
(3 answers)
Closed 2 years ago.
I have this situation, with two seperated card components, and it is nesseserly to add both headings same height.
Is it possible using only CSS?
<div class="card">
<div class="card__head">
<h4 class="heading4 c-white">
Heading
</h4>
</div>
<div class="card__body">
<p class="paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis commodo mauris.
</p>
</div>
</div>
simple no by pure css you can not do this. you have to put fixed height which is not feasible. best way to go is matchHeight js and using display:inline-block; and vertical-align:middle.
1) you apply div structure and css according to codepen using inline-block. keep in mind that both title are in different columns
<div class="fa-title"><h4>heading 1</h4></div>
<div class="fa-title"><h4>heading 2</h4></div>
<style>
.fa-title{text-align:center;}
.fa-title h4{display:inline-block; vertical-align:middle;}
.fa-title h4::before,
.fa-title h4::after{content:""; display:inline-block; vertical-align:middle; height:100%; white-space:nowrap;}
</style>
2) apply js to that div for common height of both div.
`$('.fa-title').mathcHeight();`
http://brm.io/jquery-match-height-demo/
https://codepen.io/edge0703/pen/iHJuA
You want same height heading and if title is bigger then you need to hide overflow title text part using css.
You can use this css properties for heading section:
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
I have a short text that is followed by an SVG in a limited-width container.
The expected behaviour is that the text breaks if it's longer than the container width BUT I would like it NOT to break right between the text and the svg:
Current result:
Expected result:
Adding a <nobr> or a <span>tag in the middle of the text (before blue) and closing it after the SVG is not an option as the text comes from an external database and cannot be edited.
<span class="text">
Jack Wolfskin Jacke Colorado Flex - Midnight Blue
</span>
<span class="svg">
<svg>
....
</svg>
</span>
add display-block to svg container:
.svg {
display: inline-block;
}
The only solution I found required a nasty change in the origin HTML.
To make sure the icon is never alone in the new line I wrapped the last word and the icon in a new element with white-space: no-wrap;, plus if we want it to still split if the line cannot accommodate last word with the icon we can make this new container inline flex and flex-wrappable.
<div>
Lorem ipsum dolor sit
<span class="last_word">
very_long_last_word
<svg>...</svg>
</span>
</div>
.last_word {
/* Stick icon to last word */
white-space: no-wrap;
/* Make sure last word and icon will break ultimately */
display: inline-flex;
flex-wrap: wrap;
}
Live example: https://jsfiddle.net/uerzo6sa/
You can prevent the line breaking with this markup. It doesn't need to include the last word, so you can use it even with a generated content.
JSX
<div>
{children}
<span className="tail">
{'\u00a0'}
<svg></svg>
</span>
</div>
HTML
<div>
Lorem ipsum dolor sit<span class="tail"> <svg></svg></span>
</div>
CSS
.tail {
white-space: no-wrap;
}
https://jsfiddle.net/radarfox/65h40jt7/
You can add padding to the text and a negative margin:
<span class="text" style="padding-right: 15px;">
Jack Wolfskin Jacke Colorado Flex - Midnight Blue
</span>
<span class="svg" style="margin-left: -15px;">
<svg>
....
</svg>
</span>
That way, if there isn't room for the padding, the last word will get pushed to the next line also.
(This is based on this answer: https://stackoverflow.com/a/25857961/5899236)
You can define position: absolute on the SVG, with auto for top, right, etc.
https://codepen.io/jsit/pen/xxOQoVW
The only side-effect is this will allow the SVG to appear outside of the containing box; this is in a sense the reason it works at all.
I'm trying to use <img> within mdl-card__supporting-text but if the image is bigger than the card, the image would not scaled to fit within the card's supporting text area. See the codepen for example. See how the right side of the image is covered up.
I'm not expert in css and mdl. I have also tried to search for a solution and didn't quite find one that would work. If anyone has an idea, I would really appreciate if you could give a helping hand. Thanks.
For me this simple snippet worked:
img {
height: auto;
width: 100%;
}
But if you will have more than just this image, you should consider using a class for this.
.card-img {
height: auto;
width: 100%;
}
And for better overview you should use the .mdl-card__media class on a div as the container, if you are trying to make a layout like this.
<div class="mdl-card mdl-shadow--2dp demo-card-square">
<div class="mdl-card__media">
<img src="http://placehold.it/400x300">
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenan convallis.
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
View Updates
</a>
</div>
</div>
I am storing content in the database, for example:
Hello
This
is
Text
and when I pass that to a textarea, it stays with the new line breaks. But if I pass that text to a div with content editable, it would stay like this:
Hello This is Text
How can I fix this problem?
Set a style on the div: white-space: pre or white-space: pre-wrap
Example: http://jsfiddle.net/fPv6S/
To add some info on #Explosion Pills correct answer and extract some info from MDN:
The CSS white-space attribute is there to help:
pre:
white-space: pre
Sequences of white space are preserved. Lines are only broken at
newline characters in the source and at <br> elements.
This might result in unwanted horizontal scrollbars as shown in the example!
pre-wrap:
white-space: pre-wrap
Sequences of white space are preserved. Lines are broken at newline
characters, at <br>, and as necessary to fill line boxes.
As #ceremcem pointed out the line breaks at the end of the box will not be transferred when the text is copy-pasted, which makes sense since these line breaks are not part of the text formatting but rather of the visual appearence.
pre-line:
white-space: pre-line
Sequences of white space are collapsed. Lines are broken at newline
characters, at <br>, and as necessary to fill line boxes.
div{
border: 1px solid #000;
width:200px;
}
.pre {
white-space: pre;
}
.pre-wrap{
white-space: pre-wrap;
}
.pre-line{
white-space: pre-line;
}
.inline-block{
display:inline-block
}
<h2>
pre
</h2>
<div class="pre" contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____ ____</div>
<h2>
pre-wrap
</h2>
<div class="pre-wrap" contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____ ____</div>
<h2>
pre-line
</h2>
<div class="pre-line" contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____ ____</div>
<h2>
Chrome FIX
</h2>
<div class="pre-line inline-block" contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____ ____</div>
EDIT 08/14/2018:
In Chrome you might experience troubles: Pressing Enter will generate a new <div> inside your contenteditable. To prevent that you can either press Shift+Enter or set display: inline to the contenteditable <div> as seen in the fiddle.
Try this......
var patt2 = new RegExp("<div>","g");
var patt3= new RegExp("</div>","g");
var patt4= new RegExp("<br>","g");
var z=x.replace(patt2,"\n").replace(patt3,"").replace(patt4,"");
That will do it...
You could search and replace newlines with <br />.
http://jsfiddle.net/fPv6S/1/
I am relatively new to coding and am trying to create a very simple slideshow only I want the javascript to be "linked" to my image url's in the css rather than using div id's for the images in html. Can this be done because I can't seem to figure it out.
Basically, my website has a series of image thumbnails that currently expand when clicked upon, thus a vertical accordion feature. The accordion is its own div id and everything to do with the accordion is kept within a div class "container" and the images, specifically, are within a div class "wrapper". All of the text and links are within the body of the html and the images are all in css.
I understand how to create a image slideshow (just rotating images, no clickable images/links) in the html and the slideshow works when I moved an image from the css into the html. However, after doing this, the image is no longer within the "rules" of the accordion. Thus the image that I move into the html rotates, but is overlapping the text and is no longer an image slice like the rest of the accordion. I can move the slideshow image around on the page using css, but it still overlaps the text and other features within the accordion.
I've even tried moving the images in the html around to different locations within the body to see if the problem was related to where the images were placed, but this did not solve the problem.
So is there a way to use javascript and keep the images in the css so the accordion features are also maintained? I am stuck with this and don't know what to try next. Thanks.
<body>
<div class="container">
<h1 class="va-name"> Amy Danielsons </h1>
<h2 class="va-contact">Contact</h2>
<h3 class="va-resume">Resume
<h4 class="va-about">About</h4>
<h5 class="va-port"><a href="#">Online Portfolio</h5>
<h6 class="va-hatch"><img src="images/pattern.png" width="10" height="10" alt="hatch" />
</h6>
<div id="va-accordion" class="va-container">
<div class="va-nav">
<span class="va-nav-prev">Previous</span>
<span class="va-nav-next">Next</span>
</div>
<div class="va-wrapper">
<div class="va-slice va-slice-1">
<!--slider 1 images -->
<div>
<img src="images/testa.jpg" />
</div>
<div>
<img src="images/testb.jpg" />
</div>
<div>
<img src="images/testc.jpg" />
</div>
<h3 class="va-title">Cranbrook</h3>
<div class="va-content">
<p>Paragraph Title</p>
<p2>dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.</p2>
</div>
</div>
</div>
(css portion below: you can see where I deleted the url for the first image slice and moved the image (and added 2 more images) into the html above)
}
.va-slice-1{
background:#FFF
}
.va-slice-2{
background:#FFF url(../images/2d/liz.jpg) no-repeat center center;
}
.va-slice-3{
background:#FFF url(../images/2d/oldcar.jpg) no-repeat center center;
}
So is there a way to use javascript and keep the images in the css so the accordion features are also maintained?
To keep the images in the CSS, use an inline style attribute. Instead of
<div>
<img src="images/testb.jpg" />
</div>
Use
<div class="image-wrap" style="background: url(images/testb.jpg)"></div>
then set the correct height and width for .image-wrap either using javascript, or in your stylesheet.
Though I, like others, don't entirely understand your situation, this article explains how to grab the background-image's URL if you are using jQuery.
Essentially it parses
$('img').css('background-image');
To set the URL, use
$('img').css('background-image', 'url:("http://www.example.com/image.png")');