CSS indent first line of text past the right edge - html

It is possible to use text-indent property to indent the first line of text towards either side of left corner. Consider this example:
h1 { text-indent: -200px; margin-left: 200px; }
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vehicula molestie imperdiet.</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vehicula molestie
imperdiet.
|---------- 200px ----------+------ 100% - 200px ------|
|-------------------------->| left margin
|<--------------------------| negative text indent
Is there a trick to do this the other way round:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vehicula molestie
imperdiet.
|------ 100% - 200px ------+---------- 200px ----------|
What I want is the first line (and only the first line) of text to extend 200px past the left edge. Perhaps there is a similar CSS property which applies indenting around the right edge or applies to 2nd and latter lines of text.
Here is a jsFiddle

text-indent could come from parent. with a padding.
http://jsfiddle.net/qsDST/
#wrapper {
width: 300px;
text-indent: -200px;
padding-left:200px;
}
h1 {
background: lime;
display:inline;
}

Is this you want?
h1.other-way-round {
margin-left: 0px;
text-indent:0px
}
DEMO
Second method
h1.other-way-round{
text-indent:0;
position:relative;
width:100%;
left:-200px;
}
DEMO

As I undarstand your expected result is something like this:
Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
Mauris vehicula
molestie imperdiet.
The easiest way to do this might be using Javascript.
You could detect the 2nd and past lines and wrap an tag around them with a padding-right of 200px.
You may need to use jQuery or simmilar to do this.
Badly it's not possible to set width/height nor padding to the :first-line pseudoelement.

Related

How to lock words in error message not to be devided part on line and the rest on new line

I am facing this issue. In Angular 2 we have error message and I donĀ“t know from which reason when there is not enough space for the word it devides this word so that some part stays on the line and the rest is thrown on next line. Here is the image screen
Is tere any therm to lock down words?
Thanks.
Can't see the images, but I guess the issue.
use word-wrap: nowrap to stop that :
div {
width: 100px;
border: 1px solid black;
}
.one-line {
white-space: nowrap;
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultricies.</div>
<div class="one-line">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultricies.</div>

How to have a hidable paragraph in an HTML email template

I'm creating email template with variables in it. The variables will be replaced at run-time with one of two different sets of values as show below. The first set has an extra paragraph in the middle with a link embedded in it. The problem I'm having is getting the second and third paragraphs to have the correct spacing when they are combined. Is there some way to create a bottom margin from p3 to create that space between the second and third paragraphs?
Here is the template I am using.
Template
<style type="text/css">
body{
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.5em;
background-color: #f5f5f5;
}
.body-div{
width: 560px;
background-color: #ffffff;
padding: 10px 20px;
margin: 0 auto;
}
.below-spacing, .p3{
padding-bottom: 20px;
}
.above-spacing{
padding-top: 10px;
}
.p1:empty, .p2:empty, .p3:empty{
display:none;
}
</style>
<body>
<div class="body-div">
<div class="below-spacing above-spacing">{{FirstParagraph}}</div>
<div><span class= "p1">{{MidParagraphPart1}}</span><span class="p2">{{MidParagraphPart2}}</span><span class="p3">{{MidParagraphPart3}}</span></div>
<div>{{LastParagraph}}</div>
</div>
</body>
</html>
Example 1
In this example I've inserted values into all the variables showing all three paragraphs and the link with text in it. Notice how paragraphs two and three do not space correctly in a browser. The CSS is the same as above.
</style>
<body>
<div class="body-div">
<div class="below-spacing above-spacing">Section of text #1 Lorem ipsum dolor sit amet, dolor porta wisi, sed et dui lacinia facilisi tincidunt hendrerit, risus sodales ipsum semper nulla sit, sed cursus sapiente, aliquam tincidunt sed leo arcu in.</div>
<div><span class= "p1">Section of Text #2, Part #1. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </span><span class="p2">(Part #2) Link text</span><span class="p3"> Part #3 Lorem ipsum dolor sit amet, et eget. Lorem ipsum dolor sit amet, et eget.</span></div>
<div>Section of text #3 Lorem ipsum dolor sit amett, at consectetuer id sollicitudin amet posuere. </div>
</div>
</body>
</html>
Example 2
In this example I've replaced only the first and last variables with text. The middle paragraph is hidden and both paragraphs are spaced correctly. The CSS is the same as above.
</style>
<body>
<div class="body-div">
<div class="below-spacing above-spacing">Section of text #1 Lorem ipsum dolor sit amet, dolor porta wisi, sed et dui lacinia facilisi tincidunt hendrerit, risus sodales ipsum semper nulla sit, sed cursus sapiente, aliquam tincidunt sed leo arcu in.</div>
<div><span class= "p1"></span><span class="p2"></span><span class="p3"></span></div>
<div>Section of text #3 Lorem ipsum dolor sit amett, at consectetuer id sollicitudin amet posuere. </div>
</div>
</body>
</html>
Try this:
Add this to the end of your css.
.hidden{
display: none;
}
Then add the injectable variable Hidden to any element you want to hide on demand.
<div class="below-spacing {{Hidden}}"><span>{{Paragraph2}}</span><span>{{Paragraph3}}</span><span>{{Paragraph4}}</span></div>
Inject "hidden" (no double quotes) for the variable {{Hidden}}. That will hide the paragraph with the correct spacing.
You can remove the p1, p2, and p3 classes.
The span is inline tag. We can not set margin for it. You should set span to display: inline-block.
.p1,
.p2,
.p3 {
display: inline-block;
}
To hide second span you should add class empty for it:
<span class="p2 empty></span>
CSS:
.p1.empty,
.p2.empty,
.p3.empty {
display: none;
}
I saw some error in your HTML code.
your first span is missing " before the class name.
Your second span doesn't have a class. Maybe add p2 like you want.
I'm not sure to understand the whole question here, but why did you put a
display: none;
to your span?
Try
display: inline-block;
Another solution could be to remove span and add
<p>
instead and add that in your css
p{
margin-bottom:20px; //can add a class p3 to your p.
}

Determining if a line has wrapped in a browser

Is there any programmatic method for determining if a line has wrapped in the browser it is being displayed in? The content below this line is absolutely positioned (for purposes of source-ordering) and I need to change its position if the line wraps.
You can determine if an element was wrapped by checking its height and comparing it to a similar element with the same content but wider.
This is how you can do it:
Create a hidden element with the same content and style as the the one you want to check, but with a really big width value.
Append that created element to the element that contains the line or paragraph.
Compare the heights of the elements (if they are the same, no wrapping; if they are different, the line was wrapped).
Remove the created element.
For example:
function checkWrapping() {
// for each paragraph in the div, check if it was wrapped
$("#mydiv").find("p").each(function () {
// create a hidden paragraph with the same text and append it to the parent
var aux = $("<p style='display:none;position:absolute;width:10000000px'>" + $(this).text() + "</p>");
$(this).parent().append(aux);
// compare the height of the paragrap with the height of the one-line paragraph
if ($(this).height() > $(aux).height()) {
console.log($(this).attr("id") + " is wrapped!");
} else {
console.log($(this).attr("id") + " is NOT wrapped!");
}
// remove the hidden paragraph at the end of the check
$(aux).remove();
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mydiv">
<p id="p0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tristique rutrum velit, sit amet vestibulum dui consectetur at. Suspendisse scelerisque pellentesque lectus in lacinia.</p>
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p id="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tristique rutrum velit, sit amet vestibulum dui consectetur at.</p>
</div>
<input type="button" value="check if wrapped" onclick="checkWrapping();">
You can see the sample also on this jsfiddle: http://jsfiddle.net/o1ay0e71/ (it will allow you to resize the window easily to compare results).
Also, if the line has html tags, use .html() instead of .text() as shown on this update: http://jsfiddle.net/o1ay0e71/1/

Repeating background not displaying

Ok, this is by far one of the strangest problems I have encountered in my css experience. I am trying to use some subtle patterns that repeat for a div on my webpage. Strange enough, whenever i try to set an pattern that is very white, the browser refuses to load the image. When I try to use a darker image, it works just fine. Now I know that the colour is obviously not the problem, but what am I missing. Here is the HTML/CSS:
#section1{
background-image: url("../images/as.png");
}
<div id="section1">
<div class="content98">
<h1 id="h1d">De ce matest.ro?</h1>
<div id="border">
<img class="show" id="show1" src="images/untitled-2.png">
<h2 id="dix">Obiective</h2>
<hr>
<div id="hided1"><p class="hiding">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tellus lorem, feugiat ut condimentum ac, ultricies vitae nibh. Duis sed lacinia magna.>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<br><br>
</div>
First check your body background color white or change and see. Then Check in inspect element of browser in style box that your property is strikeout or not.
#section1{
background-image: url("../images/as.png");
}
And then add background-repeat:repeat; to your image like this.
#section1{
background-image: url("../images/as.png");
background-repeat:repeat;
}
even like this you can write
#section1{
background:url("../images/as.png") repeat;
}

background image with overlapping content depending on mobile or desktop view

Running into a layout issue between mobile/tablet and desktop.
For mobile: I need the hero image to be first, then the content to be beneath it. (sample here)
For tablet/desktop: I need the content to lay on top of the hero image. (sample here)
I've tried using a background image but found that adjusting the layout of the page effects the background image size and proportions
I've tried absolutely position one on top of the other but run into a scenario where I end up fiddling with the layout between views (using bootstrap) more than what should probably be manageable.
Would love any thoughts on how to produce this result.
Will try to provide code samples of what I've done but not sure it's relevant since none of it seems to produce the desired results.
Here's a quick example that I've created for you, please check:
#container {
background: red;
text-align: center;
padding: 20px 0px;
}
#image, #content {
display: inline-block;
width: 45%;
vertical-align: middle;
}
#image img {
width: 100%;
}
#media (max-width: 500px) {
#image, #content {
display: block;
width: 100%;
}
}
<div id="container"><div id="image"><img src="http://placehold.it/350x150" /></div><div id="content">Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. </div>
Click on Run Code Snippet and view the above snippet in Full Page and then reduce your browser window to 500px or smaller, you'll see that the content will automatically get under the image. Initially, both the <div> containing the image and the content are being displayed as inline-block but for screens smaller than 500px, we use #media-queries to change their display property to block which is why the content goes underneath the image.
Here's a CodePen example I set up to accomplish what you're asking: http://codepen.io/trevanhetzel/pen/pyCnf
Essentially, if you use an inline image as compared to a background image, you can set it's position to absolute at a certain media query breakpoint. With it's container positioned relative and the image's sibling (.hero-content) positioned relative, you can just float it right at that same breakpoint, change the width to however wide you want it, and it sits right on top of the image.
HTML
<div class="hero-contain">
<img src="http://lorempixel.com/1000/300/" class="hero-img">
<div class="hero-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a enim eu risus accumsan venenatis. Donec venenatis nunc ac tellus tempor, ac rutrum lorem semper. Suspendisse pulvinar elit sed luctus pulvinar. Donec id ultricies dui. Pellentesque suscipit nulla maximus, mollis urna laoreet, tempor tortor.</p>
</div>
</div>
CSS
.hero-contain {
position: relative;
margin: 0 auto;
max-width: 1000px;
}
.hero-img {
max-width: 100%;
}
.hero-content {
position: relative;
background: rgba(255, 255, 255, .5);
padding: 20px;
}
#media (min-width: 800px) {
.hero-img {
position: absolute;
}
.hero-content {
float: right;
width: 45%;
margin: 20px;
}
}
Use media queries.
When width of window will be less, than your tablet/desktop content, switch media query and just display your divs block. For displaying them in row use display:inline-block;
Example. Try to resize result window.