I have some text inside of a container. The container could be div, td, or even p which may look like this in browser:
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Is it possible to inject linebreaks purely by CSS after certain number of characters. for example if we should inject after 10 symbols it should look like this:
Lorem ipsu
m dolor si
t amet, co
nsectetur
adipiscing
elit, sed
do eiusmo
d tempor i
ncididunt
ut labore
et dolore
magna aliq
ua.
Is it possible to make this purely by CSS, without any javascript?
One way is to consider a monospace font where the width of all the characters is the same thus you can fix the width of the container based on this width and obtain visually what you want:
.box {
font-family: "Inconsolata", monospace;
width: 10ch;
word-break: break-all;
border:1px solid;
}
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="box" style="font-size:20px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
You can give your container a fixed width and use word-break:break-all:
.test {
width: 75px;
word-break: break-all;
}
<div class="test">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
I would set
p, td, div {
word-break: break-all
}
and define the width in em units. I don't know if this works exactly as you want, but should help you.
You can't. The most current solution is to set your parent container width in char :
div {
width: 10em;
}
Related
This question already has answers here:
How to center elements on the last row in CSS Grid?
(8 answers)
Centering grid items in an auto-fill container
(3 answers)
Closed 2 years ago.
auto-fit is trying to fit as many cells into the grid container as possible and the minimum width a cell can be is 180px. When there’s overflow, a new row is made. This new row seems to have the exact same columns as the row above.
I am wanting the items in the new row to be horizontally centered in the container. Is this possible?
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
<div class="grid-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
The title explains itself I belive. My CSS skill is not good enough to make it work, or predict everything.
I made an simple fiddle: https://jsfiddle.net/f6oe9umb/3/
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<div class="fakeparagraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<div class="fakeparagraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
<div class="fakeparagraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<div class="fakeparagraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
<div class="fakeparagraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
In this case simple margin-bottom should be good enough. But is it? And even if - how to find the correct value?
Check the default css for browsers here, and there it is:
p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
so say you got a <div class="fake-p"/>, and the styling:
.fake-p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
But to be honest each browser has their default setting to html tags (different browser might have different styling but some are the same) and they can change it any time, so I suggest you to directly use a p tag if you want its behaviour.
I think that should make it look like a normal p:
<style type="text/css">
.fakeparagraph {
display: inline-block;
width: 100%;
}
I have a problem with taking a triangle on a bottom of div, as you can see in image below. This three div's are in flexbox.
HTML code:
<section class="main_content">
<div class="1st_class">
<div class="features">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="triangle"></div>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
If you want a flexible solution I would recommend using an SVG background image of a triangle and then stretching it across the bottom of the box.
I have created a jsFiddle to show what I mean.
.active:after {
content: '';
position: absolute;
bottom: -15px;
left: 0;
width: 100%;
height: 15px;
background-size: 100% 100%;
background-image: url(triangle.svg);
}
I have a parent div with seven or more child divs within. I need to display 4 child divs across... the rest will wrap in subsequent rows of four divs each. I need the child divs to all have equal height, relative to the other three child divs that share the same row. The parent div is responsive as well, so it may end up displaying rows of 2 child divs across when the viewport is smaller.
display:inline-block does not solve this issue (unequal child div heights), and display:table-cell does not allow the child divs to wrap into subsequent rows. How can I accomplish my objectives?
Here is a very basic jfiddle: https://jsfiddle.net/hockey2112/3r2pL25v/
<div class="table">
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. This div has a little more information in it, and therefore it will be taller than the other divs.</div>
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
.table {font-size: 9px;}
.tablecell {display: inline-block;
width: 23%; border: 1px solid #ff0000; vertical-align: top;}
To extend my comment regarding the usage of flexbox:
With flexbox, aligning the height of the elements along the cross-axis is done automatically, since the default value of justify-content is stretch.
All you have to do, is to set display: flex; on the container element. You may also want to add flex-wrap: wrap; in order for the child elements to wrap into multiple rows.
Also, the default flex-direction is row, so you don't need to specify that.
To sum up, you need to use the following CSS style:
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 0 23%; /* grow = 1, shrink = 0, basis = 23% */
}
Unable to figure this out. Which style is correct based on the css? Should each 'lorem' line up in it's own row as it is shown in firefox? or split like in chrome? How can I fix it so both browsers look the same?
Here is what I have currently
<body>
<header>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</header>
<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</section>
<article>article Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</article>
<aside>aside Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</aside>
<footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</footer>
</body>
http://jsfiddle.net/nKHkg/
body {
width: 960px;
margin: 100px auto;
text-align: center;
}
header {
margin: 5px;
padding: 20px;
}
section {
margin: 5px;
padding: 100px;
}
article {
float: left;
margin: 5px;
padding: 20px;
}
aside {
float: right;
margin: 0 5px;
padding: 20px;
}
footer {
margin: 5px;
padding: 5px;
}
The above looks the same with Firefox
In Chrome, the article and aside is divided into two columns and looks uneven.
All you needed to do was apply good site architecture. When creating sections throughout the site you need to set your containers appropriately by using margin, float, display, and clear:both
See the difference now in your FIDDLE