I have this code:
<p>Some text Some text Some text Some text Some text Some text Some
text Some text Some text Some text Some text Some text Some text Some
text Some text Some text Some text Some text Some text Some text Some
text Some text Some text Some text Some text <a href="/es/cunit"
class="more-link">more</a></p>
So, the "more" link is shown inline with the "some text.." text.
I need it to be place in a new line just below the text.
display: block; doesn't work because it will fill the 100% of the width.
The html code is generated by a CSM, then I don't want to change it.
Picture below:
I can't upload a picture with Safari ...:(
You can use :before :after pseudo element and placing content: "\A" which denotes to line feed character:
p a:after, p a:before { content:"\A"; white-space:pre; }
<p>Some text Some text Some text Some text Some text Some text Some
text Some text Some text Some text Some text Some text Some text Some
text Some text Some text Some text Some text Some text Some text Some
text Some text Some text Some text Some text <a href="/es/cunit"
class="more-link">more</a></p>
.more-link:before{
content: '';
display: block;
}
I don't have sufficient reputation to comment, so I'm posting it here. But why don't you user a line break tag.
<br>
Make your code like this.
<p>Some text Some text Some text Some text Some text Some text Some
text Some text Some text Some text Some text Some text Some text Some
text Some text Some text Some text Some text Some text Some text Some
text Some text Some text Some text Some text
<br>
<a href="/es/cunit"
class="more-link">more</a></p>
Related
I have a symbol from other font-family and need to adjust its size. Unfortunately font-size:200% increase line-height of whole line;
How to increase one character font-size without increasing line-height?
I know about "severing" the character with position:absolute but this also shift text horizontally. When what I want is something line line-height: inherit (which doesn't work).
.increased {
font-size:200%
}
<p>normal</p>
<div style="background-color:yellow">.text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
<p>increased (problematic)</p>
<div style="background-color:yellow"> <span class="increased">.</span>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
If you're sure that it won't be the only character in that line, you can use line-height: 0. Otherwise you would have to manually adjust line-height value.
.increased {
font-size: 200%;
line-height: 0
}
<p>normal</p>
<div style="background-color:yellow">.text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
<p>increased (problematic)</p>
<div style="background-color:yellow"> <span class="increased">.</span>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
Make the element inline-block then you can adjust the line-height of only that character:
.increased {
font-size:200%;
line-height:0.2;
display:inline-block;
}
<p>normal</p>
<div style="background-color:yellow">.text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
<p>increased (problematic)</p>
<div style="background-color:yellow"> <span class="increased">.</span>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
I have a paragraph with some text in it. The <p> has text-align:center;. Imagine that the text is bigger than one line. The linebreak is always placed leaving all the posible words in the first line, and just a few in the second line.
Screenshot example:
And here is a screenshot of how I would like my html/css to position the breaklines:
Since the text is dynamic, and the page is to be responsive, I dont want to do this by hardcoding <br>s or wrapping the text into <span style="display:inline-block;">s to define preferred linebreaks. I wouldn't like to change the font-size either
Is there any trick to do this automatically without JavaScript?
You could do this by adding left and right padding. padding: 0 50px; but without using javascript this would pretty much be your only option.
Try this
<div class="container">
<p>
Text text Text text Text text Text text Text text Text text text Text text Text text Text text Text text Text text text Text text Text text Text text Text text Text text text Text text Text text Text text Text text Text text text Text text Text text Text text Text text Text text text Text text Text text Text text Text text Text text text Text text Text text Text text Text text Text text text Text text Text text Text text Text text Text text
</p>
</div>
.container {
font-size: 18px;
padding:0 20%;
text-align: center;
}
#media screen and (max-width: 600px) {
.container {
padding: 0 20px;
}
}
live demo - https://jsfiddle.net/grinmax_/hLzko135/
I need help with HTML, I don't know how to do this. So I've got:
<p>Text text text Text text text Text text text Text text text Text text text Text text text Text text text Text text text Text text text Link</p>
So it will show:
> Text text text Text text text Text text text Text text text Text text
> text Text text text Text text text Text text text Text text text
> **Link**
How can I make this link be next to the text but not in the <p> tag? Is it possible?
Just add display:inline; to your p tag like this:
p {
display:inline;
}
Or if you don't want to change every p tag, then add a class and add the property to that like this:
p.sameLine {display:inline;}
<p class="sameLine">Text text text Text text text Text text text Text text text Text text text Text text text Text text text</p> Link
jsFiddle: http://jsfiddle.net/AndrewL32/65sf2f66/60/
Try this:
<p style="display:inline-block">paragraph</p>
anchor
More information on the display property
Please try this one:
<p style="display:inline">Text text text Text text text Text text text Text text text Text text text Text text text Text text text Text text text Text text text </p> Link
If you try
<p>
<span class="normal-text">Lots of Texts</span>
Link
</p>
in your HTML file and
.normal-text
{
max-height: 50px;
}
in a corresponding .css file, then you will be able to apply css styling
<p> to style everything in the paragraph, text and link included
.normal-text to style everything in the normal, non-linked text
<a> to style everything to do with the link / anchor.
Please see http://www.w3schools.com/cssref/pr_dim_max-height.asp for information on max-height and a useful example.
I've recreated the issue I am having here:
https://jsfiddle.net/9p4z8fnj/
.youtube_text_infor {
margin-right: /**/
}
.youtube_video {
padding-right: 10px;
}
<div class="youtube_video"><p style="float: left;"><iframe width="300" height="200" src="https://www.youtube.com/embed/293ZfGilg-I" frameborder="0" allowfullscreen></iframe></p>
</div>
<p class="youtube_text_infor"> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text ext Text Text Text Text Text Text Text Text ext Text Text Text Text Text Text Text Text ext Text Text Text Text Text Text Text Text ext Text Text Text Text Text Text Text Text ext Text Text Text Text Text Text Text Text ext Text Text Text Text Text Text Text Text ext Text Text Text Text Text Text Text Text ext Text Text Text Text Text Text Text Text</p>
<div style="clear: left;">
My goal is to add some white space (padding) from the youtube embedded link such that there will be a gentle gap between the text and the video.
I've tried toying with the padding and the margin with both the text and the embedded link, with no avail.
Any Help would be appreciated.
You need to add this css in your style
.youtube_video {
padding-right: 10px;
float: left;
}
I am attempting to design a responsive layout in which there is an image and a paragraph side by side and the image is vertically aligned with the text (the paragraph height changes with adjustments to the browser width).
Here is my currant code,
http://jsfiddle.net/xSrpt/
I have tried using
vertical-align:middle;
and
vertical-align:central;
on the parent div (#intro) and have not been able to get anywhere with it.
I feel like this should be an easy fix and i am missing something but hopefully you guys can help.
please include a working fiddle with your answer.
Thanks a lot!
Just to add a comment to above answer ( rep too low ).
It is unnecessary to convert the div into table.
All you have to do is applying vertical-align:middle to child element and not the parent.
#intro > * { vertical-align:middle }
Here's your forked fiddle.
http://jsfiddle.net/UBD6S/
much simpler solution.
try add to its parent - display:table-cell;
edit:
you need to make the div "act" like a table, as below:
CSS:
#intro{
display:table; /** table **/
width:90%;
background-color: #999;
padding:5%;
}
#pic{
height:100%;
width:80px;
background:black;
display:table-cell; /** table-cell **/
vertical-align:middle;
}
#your_pic {
width:80px;
height:80px;
background:#fff;
}
#p{
display:inline-block;
width:80%;
}
HTML:
<div id="intro">
<div id="pic"><div id="your_pic"></div></div>
<p id="p">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
</div>