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/
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>
Is there a way to put two images one above the other in the same line with text? This example for three lines, and the second line has two images one above the other after the words "of text" and then continue the text normally? whether using css or a table or anything?
I tried putting them in a div or an image block, but nit sure how to implement it. They can be put one above the other in a table cells, however tables doesn't go side by side with text, they can be either float right or left of a paragraph, not in the middle I think.
Example pictures links: 1, 2. You can use them to make an demo in jsfiddle.net or something if possible.
Using line-height and display:inline-block
p{
line-height:40px;
}
span{
display:inline-block;
vertical-align:middle;
}
img{
width:20px;
display:block;
}
<p>Is there a way to put two images one above the other in the same line with text? This example for three lines, and the second line has two images one above the other after <span><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_-6FYKDSRJ2Qz8CTZLADbDgHmPaGKQjBMhbCqgEbgR7YkR7mS"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZYEcLppt4iu9tRNmH0KpP-_AZL62ZSgk8P36_4jG--MMXRg1xag"></span> the words "of text" and then continue the text normally? whether using css or a table or anything?</p>
https://jsfiddle.net/kb1tc9r4/11/
Here is a solution where the css code uses flexbox to achieve that
.images {
display: inline-flex;
flex-direction: column;
}
<div>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text <div class='images'>
<img width='20' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_-6FYKDSRJ2Qz8CTZLADbDgHmPaGKQjBMhbCqgEbgR7YkR7mS'>
<img width='20' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZYEcLppt4iu9tRNmH0KpP-_AZL62ZSgk8P36_4jG--MMXRg1xag'>
</div>text text text text texttext text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text
</div>
Here is another fiddle https://jsfiddle.net/y7notgbp/
You just a tiny css and html. Setting height of images to 0.5em makes sure your images fit into the line. Outer element needs inline-block set to display property while images need block set to the display property.
.inline-images{
display: inline-block;
}
.inline-images img{
height: 0.5em;
display: block;
}
Blaaa
<span class="inline-images">
<img src="http://www.stickpng.com/assets/images/58afdad6829958a978a4a693.png">
<img src="http://www.stickpng.com/assets/images/58afdad6829958a978a4a693.png">
</span>
blaa
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>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I want to make a two column layout using DIVs, where right column will have 50% width and the left one would take 50% too.
How can I do that?
Demo
html
<div class="div1">Left div</div>
<div class="div2">Right div</div>
css
body, html {
width: 100%;
height: 100%;
margin:0;
padding:0;
}
.div1 {
width: 50%;
float: left;
background: #ccc;
height: 100%;
}
.div2 {
width: 50%;
float: right;
background: #aaa;
height: 100%;
}
There are a large number of ways, without knowing what you've attempted, what your requirements are, what will work for you and what wont its a bit of a shot in the dark - but I'll give you a high level example of a number of techniques.
Use inline elements with 50% width, they will next against one another horizontally
Float two elements with width 50%, they will nest horizontally
Use CSS3 columns
Use CSS tables with two table cells, one for each column
I would tend to recommend using the CSS column approach if supported, as it is specifically designed for the purpose...that said, its hard to know what the precise purpose at hand is.
Examples
HTML
<h1>Inline</h1>
<div class='inline'></div>
<div class='inline'></div>
<h1>Float</h1>
<div class='float'></div>
<div class='float'></div>
<h1>Columns</h1>
<div class='cols'>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 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>
<h1>Table</h1>
<div class='table'>
<div class='cell'></div>
<div class='cell'></div>
</div>
CSS
html, body {
width:100%;
font-size:0;
margin:0;
padding:0;
}
h1 {
font-size:20px;
}
div {
border:1px solid;
height:200px;
width:50%;
box-sizing:border-box;
font-size:14px;
}
.inline {
display:inline-block;
}
.float {
float:left;
}
.cols {
-webkit-column-count:2;
width:100%;
}
.table {
display:table;
width:100%;
}
.cell {
display:table-cell;
}
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>