I have text inside div.
What I want to do is make lines same width, so space automatically changes to align lines, like you can do in Word.
Can it be done with html and css?
You can try with text-align: justify;
Working copy is here:
p {
text-align: justify;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eros velit, dictum id libero quis, porttitor volutpat odio. In et lectus a ligula pulvinar egestas. Nullam ornare turpis ac dui efficitur commodo. Mauris laoreet cursus lorem, quis congue neque venenatis vel. Nullam eu maximus nulla, vitae fermentum nisl. Sed eu euismod elit, eget consequat lorem. Suspendisse eget interdum elit. Nullam convallis massa magna, quis scelerisque orci sollicitudin eget. Curabitur porta nibh nisl, at tempor leo vulputate quis. Nam eget nibh turpis. Suspendisse ac ex finibus, consectetur nunc ac, dapibus sapien. Curabitur eleifend ut mauris quis sodales. Aenean viverra ante non mauris egestas, sed pellentesque dolor tempus. Donec rhoncus quis magna posuere fermentum.swdjsdlkalksdnlds jdhjfhdskjnhckjdsnc
</p>
You can use:
div {
text-align: justify;
text-justify: inter-word;
}
More info here
Related
I want the text to not wrap white-space: nowrap and for overlapped content to be hidden overflow: hidden, but I DO still want there to be 20px padding on either side (eg, text in coloured boxes to be 20px away from edges).
I couldn't seem to find a good answer on SO already. Pointers would be much appreciated.
.row {
display: flex;
gap: 10px;
}
.col {
background: blue;
padding: 0 20px;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
}
.col:nth-child(2) {
background: red;
}
<div class="row">
<div class="col">
<p>1a Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris felis orci, tempor vehicula pretium vel, commodo et elit. Donec vitae lacinia turpis. Nulla scelerisque, augue a pulvinar elementum, sapien elit porta ex, et aliquet nisi felis vitae nunc. Morbi aliquam mollis arcu a ultrices. Integer accumsan sapien eros, a posuere mauris hendrerit et. Curabitur interdum scelerisque mattis. Quisque a erat metus. Donec sit amet efficitur lacus. Morbi sodales, nulla imperdiet volutpat porta, justo massa sagittis nisl, nec lacinia magna purus ac nisl. Duis ultrices, est sit amet cursus rutrum, nisl lacus consectetur lectus, at pretium nulla massa non erat</p>
<p>1b Cras commodo ultricies mi. Vivamus quis ex imperdiet, pharetra mauris vitae, mattis justo. Aenean eget ultrices magna. Suspendisse rutrum tristique dolor quis porttitor. Aliquam pulvinar vulputate lacinia. Donec dictum efficitur ipsum, quis ullamcorper dui tincidunt sollicitudin. Phasellus tristique bibendum tincidunt. Phasellus sagittis vehicula ligula, ac sollicitudin velit condimentum maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus lectus nisi, non dictum sapien ullamcorper in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</p>
</div>
<div class="col">
<p>2a Cras tristique diam a aliquet sollicitudin. Donec vehicula dui ipsum, eget imperdiet neque porta nec. Donec vestibulum iaculis arcu imperdiet malesuada. Sed mattis ex eu ipsum bibendum, lobortis condimentum urna maximus. Integer vehicula ipsum lacus. Pellentesque vel lacus felis. In sed interdum eros. Fusce et scelerisque mauris. Donec vel egestas elit. Maecenas in ligula ac ipsum tempus hendrerit. Pellentesque quis lacinia augue. Integer vehicula nisi rutrum, egestas eros id, euismod nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo tortor, bibendum ornare turpis vel, fermentum tempus enim</p>
<p>2b Nulla nec tempor felis. Donec auctor, leo sed vehicula egestas, nunc dui pharetra lorem, sit amet consequat risus dolor ac velit. Aenean tempus semper sapien, sollicitudin sagittis enim tristique nec. Mauris leo lacus, maximus ut convallis quis, pretium a ipsum. Aenean vel finibus urna. Donec dolor nunc, tincidunt et turpis quis, scelerisque euismod purus. Donec eu hendrerit sem. Vestibulum sed sodales lectus, vel semper lorem. Nunc sit amet est purus</p>
</div>
</div>
The overflow should be set on the <p>:
.row {
display: flex;
gap: 10px;
}
.col {
background: blue;
padding: 0 20px;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
}
.col > p {
overflow: hidden;
}
.col:nth-child(2) {
background: red;
}
<div class="row">
<div class="col">
<p>1a Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris felis orci, tempor vehicula pretium vel, commodo et elit. Donec vitae lacinia turpis. Nulla scelerisque, augue a pulvinar elementum, sapien elit porta ex, et aliquet nisi felis vitae nunc. Morbi aliquam mollis arcu a ultrices. Integer accumsan sapien eros, a posuere mauris hendrerit et. Curabitur interdum scelerisque mattis. Quisque a erat metus. Donec sit amet efficitur lacus. Morbi sodales, nulla imperdiet volutpat porta, justo massa sagittis nisl, nec lacinia magna purus ac nisl. Duis ultrices, est sit amet cursus rutrum, nisl lacus consectetur lectus, at pretium nulla massa non erat</p>
<p>1b Cras commodo ultricies mi. Vivamus quis ex imperdiet, pharetra mauris vitae, mattis justo. Aenean eget ultrices magna. Suspendisse rutrum tristique dolor quis porttitor. Aliquam pulvinar vulputate lacinia. Donec dictum efficitur ipsum, quis ullamcorper dui tincidunt sollicitudin. Phasellus tristique bibendum tincidunt. Phasellus sagittis vehicula ligula, ac sollicitudin velit condimentum maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus lectus nisi, non dictum sapien ullamcorper in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</p>
</div>
<div class="col">
<p>2a Cras tristique diam a aliquet sollicitudin. Donec vehicula dui ipsum, eget imperdiet neque porta nec. Donec vestibulum iaculis arcu imperdiet malesuada. Sed mattis ex eu ipsum bibendum, lobortis condimentum urna maximus. Integer vehicula ipsum lacus. Pellentesque vel lacus felis. In sed interdum eros. Fusce et scelerisque mauris. Donec vel egestas elit. Maecenas in ligula ac ipsum tempus hendrerit. Pellentesque quis lacinia augue. Integer vehicula nisi rutrum, egestas eros id, euismod nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo tortor, bibendum ornare turpis vel, fermentum tempus enim</p>
<p>2b Nulla nec tempor felis. Donec auctor, leo sed vehicula egestas, nunc dui pharetra lorem, sit amet consequat risus dolor ac velit. Aenean tempus semper sapien, sollicitudin sagittis enim tristique nec. Mauris leo lacus, maximus ut convallis quis, pretium a ipsum. Aenean vel finibus urna. Donec dolor nunc, tincidunt et turpis quis, scelerisque euismod purus. Donec eu hendrerit sem. Vestibulum sed sodales lectus, vel semper lorem. Nunc sit amet est purus</p>
</div>
</div>
This question already has answers here:
Underline several lines of text + underline to be full width + responsive
(1 answer)
Need to display multiline text with underlining lines of equal length
(5 answers)
Closed 10 months ago.
I'm making hexo blog theme. I'am trying to make line note like style. I want to make css on each line has underline(not like U tag)
want
But if I use border-bottom: 1px solid grey
real
You may also use a gradient to draw a grid below your text.
It has to match the line-height
Here an example with CSS var() to ease the tuning.
p, textarea {
--lineH: 1.6em;
line-height: var(--lineH);
padding:var(--lineH);
padding-block:0;/*reset to set first line right at top */
background:repeating-linear-gradient(to bottom, transparent 0 1.4em, gray 1.4em calc(1.4em + 2px), transparent calc(1.4em + 2px) 1.6em) 50% 0 / calc(100% - var(--lineH) * 2 ) 100% no-repeat ;
}
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<textarea placeholder="Type your texts here"></textarea>
Added a textarea to the example to show another possible use.
ressources if you need them
https://developer.mozilla.org/en-US/docs/web/css/gradient/repeating-linear-gradient
https://developer.mozilla.org/en-US/docs/Web/CSS/var
https://developer.mozilla.org/en-US/docs/Web/CSS/background
https://css-tricks.com/a-complete-guide-to-calc-in-css/
you can use more gradients to mimic a full note sheet https://codepen.io/gc-nomade/pen/bGLGNWB
You can use text-decoration: underline to get that effect (although the text-underline-offset style rule which is used to space the line from thee normal position is NOT supported in IE at all and some other browsers are a bit spotty with it). The only other way to do it is to split the content into spans and apply the border bottom or ::after pseudo-element to each span.
p {
font-size: 14px;
font-weight: 400;
line-height: 32px;
text-decoration: underline;
text-underline-offset: 4px;
}
<h2>Hello world<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed mauris a metus ultricies sagittis commodo sed tellus. Cras sodales nunc ut neque feugiat dignissim. Nullam ligula mauris, blandit eu dignissim at, rutrum vitae nisi. Proin facilisis massa vel elit fermentum, sit amet aliquam quam hendrerit. Aenean interdum nisi a metus consequat, vitae viverra ligula scelerisque. Sed in erat dictum, dapibus arcu quis, interdum orci. Suspendisse sit amet gravida purus, eu facilisis felis. Aliquam consectetur dapibus augue a suscipit. In semper pretium erat. Duis eget sollicitudin arcu, volutpat scelerisque est. Proin nisl nisi, tincidunt a justo id, lobortis tempor lacus. Quisque eu tincidunt ex.</p>
The p tag is a block element. Means if you assign a border the border would be assigned for the block. If you change p tag to an inline element then the border would be displayed like you want.
Update
with inside underlined words
p {
display: inline;
border-bottom: 1px solid grey;
}
p span {
text-decoration: underline;
color: red;
}
<h2>Hello world<h2>
<p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing</span> elit. Duis sed mauris a metus ultricies sagittis commodo sed tellus. Cras sodales nunc ut neque feugiat dignissim. Nullam ligula mauris, blandit eu dignissim at, rutrum vitae nisi. Proin facilisis massa vel elit fermentum, sit amet aliquam quam hendrerit. Aenean interdum nisi a metus consequat, vitae viverra ligula scelerisque. Sed in erat dictum, dapibus arcu quis, interdum orci. Suspendisse sit amet gravida purus, eu facilisis felis. Aliquam consectetur dapibus augue a suscipit. In semper pretium erat. Duis eget sollicitudin arcu, volutpat scelerisque est. Proin nisl nisi, tincidunt a justo id, lobortis tempor lacus. Quisque eu tincidunt ex.</p>
p {
display: inline;
border-bottom: 1px solid grey;
}
<h2>Hello world<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed mauris a metus ultricies sagittis commodo sed tellus. Cras sodales nunc ut neque feugiat dignissim. Nullam ligula mauris, blandit eu dignissim at, rutrum vitae nisi. Proin facilisis massa vel elit fermentum, sit amet aliquam quam hendrerit. Aenean interdum nisi a metus consequat, vitae viverra ligula scelerisque. Sed in erat dictum, dapibus arcu quis, interdum orci. Suspendisse sit amet gravida purus, eu facilisis felis. Aliquam consectetur dapibus augue a suscipit. In semper pretium erat. Duis eget sollicitudin arcu, volutpat scelerisque est. Proin nisl nisi, tincidunt a justo id, lobortis tempor lacus. Quisque eu tincidunt ex.</p>
try this :
text-decoration: underline;
text-underline-offset:6px;
Have you tried using the text-decoration-line property.
text-decoration-line: underline;
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-decoration-line
I have a grid layout with text and images which I want to print and I want only the page to break in the text row, and not break in images, my grid code has two rows, one for text and one for images, and the images inside the grid is another grid for the images, the code looks like this:
.grid{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas:
"text"
"sub-grid";
.sub-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
gap: 0px 0px;
grid-template-areas: "picture-one picture-two";
}
}
I've done a lot of tests with the page break inside:
#media print {
.sub-grid {
page-break-inside: avoid;
}
}
but never seems to work, it's always breaking the page on images when printing.
Here's a fiddle to reproduce:
https://jsfiddle.net/kwp59x3g/15/
Any help is welcome, thank you guys.
I think the problem is in .grid class. Remove .grid class and add these lines:
.text {
page-break-before: avoid;
page-break-after: auto;
}
.sub-grid {
page-break-inside: avoid;
}
.sub-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
gap: 0px 0px;
grid-template-areas: 'picture-one picture-two';
}
.picture-one {
grid-area: picture-one;
}
.picture-two {
grid-area: picture-two;
}
#media print {
* {
overflow: visible !important;
color-adjust: exact;
-webkit-print-color-adjust: exact;
}
.text {
page-break-before: avoid;
page-break-after: auto;
}
.sub-grid {
page-break-inside: avoid;
}
}
<button onclick="window.print()">
Print
</button>
<div class="grid">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu tortor luctus, condimentum ex id, interdum lectus. Nullam nec lectus odio. Mauris quis pharetra libero. Morbi eget elementum mi, ac auctor ex. Vivamus faucibus nec justo vel dapibus. Nulla
vitae porta orci. Fusce in ex vestibulum, dapibus lorem at, scelerisque nunc. Integer auctor gravida faucibus. Integer non magna enim. Nam nec pharetra risus. Donec sagittis consectetur urna ac dictum. Nam in tortor vel nisi porta posuere. Maecenas
fermentum ipsum in dui feugiat, vel placerat velit consectetur. In nec rutrum metus. Donec rutrum risus eget orci bibendum, vel euismod erat lacinia. Duis eleifend sollicitudin sem, mattis auctor dui porta vitae. Suspendisse vel gravida tellus, non
ultricies nunc. Suspendisse ac elit blandit, lacinia tortor sed, eleifend tellus. Duis auctor dolor dolor, id vehicula turpis commodo a. Vestibulum quis tortor volutpat, imperdiet libero non, facilisis tellus. Donec eleifend, nisl eget pulvinar congue,
ipsum mi tincidunt nisi, congue laoreet ante magna at augue. Proin eleifend mattis neque, vel maximus ex facilisis eget. Sed euismod massa orci. Suspendisse at semper sapien. Sed lobortis porttitor nisl. Ut suscipit mollis risus sit amet pharetra.
Pellentesque tempor libero ut quam faucibus egestas. Mauris mattis lectus vel augue sollicitudin, varius sollicitudin ligula tristique. Maecenas non iaculis neque. Etiam commodo purus eget tortor pharetra aliquam nec ut augue. Vivamus non risus blandit,
faucibus nunc eget, lobortis nisl. Mauris in porttitor augue, a congue dolor. Maecenas nec lacinia velit. Aliquam luctus fringilla porta. Vestibulum a libero imperdiet, pretium sapien vitae, lobortis nulla. Morbi hendrerit metus vel urna convallis
commodo et eget nulla. Etiam vitae consectetur sapien. Donec vel lacus metus. Nullam congue viverra dolor, in efficitur justo malesuada at. Aenean nisl nunc, viverra sit amet feugiat vitae, vulputate nec nunc. Etiam magna leo, porttitor ut tempor
id, volutpat eget eros. Cras vel vulputate urna. Fusce venenatis urna vel dictum consectetur. Praesent non arcu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet placerat posuere. Sed blandit tortor ac turpis maximus,
quis imperdiet libero imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin ultricies, nibh at dignissim elementum, elit ligula mollis mauris, ut molestie ipsum eros vitae urna. Nam ac augue
ut neque consectetur sagittis eget a magna. Suspendisse id elit nec dolor rhoncus pulvinar quis vel felis. Phasellus porttitor faucibus orci id scelerisque. Etiam consectetur molestie justo, sit amet ornare libero egestas vel. Nunc sit amet lorem
quis magna molestie mattis ut sed nisl. Vivamus quis leo ipsum. Praesent pulvinar, ipsum non fermentum mattis, ante quam auctor quam, eu tincidunt arcu eros ut mi. Curabitur fermentum odio sit amet luctus sollicitudin. Mauris in porttitor augue, a
congue dolor. Maecenas nec lacinia velit. Aliquam luctus fringilla porta. Vestibulum a libero imperdiet, pretium sapien vitae, lobortis nulla. Morbi hendrerit metus vel urna convallis commodo et eget nulla. Etiam vitae consectetur sapien. Donec vel
lacus metus. Nullam congue viverra dolor, in efficitur justo malesuada at. Aenean nisl nunc, viverra sit amet feugiat vitae, vulputate nec nunc. Etiam magna leo, porttitor ut tempor id, volutpat eget eros. Cras vel vulputate urna. Fusce venenatis
urna vel dictum consectetur. Praesent non arcu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet placerat posuere. Sed blandit tortor ac turpis maximus, quis imperdiet libero imperdiet. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Proin ultricies, nibh at dignissim elementum, elit ligula mollis mauris, ut molestie ipsum eros vitae urna. Nam ac augue ut neque consectetur sagittis eget a magna. Suspendisse id elit nec dolor
rhoncus pulvinar quis vel felis. Phasellus porttitor faucibus orci id scelerisque. Etiam consectetur molestie justo, sit amet ornare libero egestas vel. Nunc sit amet lorem quis magna molestie mattis ut sed nisl. Vivamus quis leo ipsum. Praesent pulvinar,
ipsum non fermentum mattis, ante quam auctor quam, eu tincidunt arcu eros ut mi. Curabitur fermentum odio sit amet luctus sollicitudin. Mauris in porttitor augue, a congue dolor. Maecenas nec lacinia velit. Aliquam luctus fringilla porta. Vestibulum
a libero imperdiet, pretium sapien vitae, lobortis nulla. Morbi hendrerit metus vel urna convallis commodo et eget nulla. Etiam vitae consectetur sapien. Donec vel lacus metus. Nullam congue viverra dolor, in efficitur justo malesuada at. Aenean nisl
nunc, viverra sit amet feugiat vitae, vulputate nec nunc. Etiam magna leo, porttitor ut tempor id, volutpat eget eros. Cras vel vulputate urna. Fusce venenatis urna vel dictum consectetur. Praesent non arcu orci. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Etiam imperdiet placerat posuere. Sed blandit tortor ac turpis maximus, quis imperdiet libero imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin ultricies, nibh at dignissim
elementum, elit ligula mollis mauris, ut molestie ipsum eros vitae urna. Nam ac augue ut neque consectetur sagittis eget a magna. Suspendisse id elit nec dolor rhoncus pulvinar quis vel felis. Phasellus porttitor faucibus orci id scelerisque. Etiam
consectetur molestie justo, sit amet ornare libero egestas vel. Nunc sit amet lorem quis magna molestie mattis ut sed nisl. Vivamus quis leo ipsum. Praesent pulvinar, ipsum non fermentum mattis, ante quam auctor quam, eu tincidunt arcu eros ut mi.
Curabitur fermentum odio sit amet luctus sollicitudin.
</div>
<div class="sub-grid">
<img src="https://plchldr.co/i/245x155?bg=EB6361" alt="">
<img src="https://plchldr.co/i/245x155?bg=EB6361" alt="">
</div>
</div>
You can break a page break (using a page break inside) with:
tables
floating elements
block elements with borders
display: grid and display: flex don't correctly work it look like some old bug. link
The overflow property didn't hide my overflown content which overflows the width of the element.
HTML
<section><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed feugiat lacus. Morbi auctor, nibh vitae scelerisque cursus, nisl purus imperdiet lacus, quis porttitor ante mauris eget tortor. Vestibulum id molestie dui. Nullam sit amet ultrices ante. Nulla venenatis pellentesque mi, vel condimentum orci facilisis pellentesque. Aenean a enim ac dui tempus ornare eget nec nisl. In facilisis varius ullamcorper. Aliquam magna erat, pellentesque ut arcu et, accumsan placerat urna. Vestibulum porta justo ut laoreet dapibus.
Etiam dictum semper dolor, in laoreet turpis aliquam eget. Aliquam pulvinar sem lectus, vitae hendrerit libero pellentesque eu. Duis nec tincidunt felis, sed feugiat.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed feugiat lacus. Morbi auctor, nibh vitae scelerisque cursus, nisl purus imperdiet lacus, quis porttitor ante mauris eget tortor. Vestibulum id molestie dui. Nullam sit amet ultrices ante. Nulla venenatis pellentesque mi, vel condimentum orci facilisis pellentesque. Aenean a enim ac dui tempus ornare eget nec nisl. In facilisis varius ullamcorper. Aliquam magna erat, pellentesque ut arcu et, accumsan placerat urna. Vestibulum porta justo ut laoreet dapibus.
Etiam dictum semper dolor, in laoreet turpis aliquam eget. Aliquam pulvinar sem lectus, vitae hendrerit libero pellentesque eu. Duis nec tincidunt felis, sed feugiat.</p></section>
CSS
*, *::after, *::before {
box-sizing: border-box;
}
html, body, div, p{
margin: 0;
padding: 0;
}
section{
width: 50%;
background-color: pink;
height: 150px;
}
p{
font-size: 1em;
color: blue;
overflow: hidden;
}
Codepen :: https://codepen.io/StinsonTheNoob/pen/oNbxjWx
If your goal is to not let the <p> start on a new line and rather not overflow, you need to set overflow:hidden to your <section>.
If you want the text to disappear if it exceeds the first line on the right side of the tag then put overflow: hidden; to its parent container which, in your case is the ...
But if you want that text remains inside the container only then you have to make the tag and the "font-size" responsive so that it adapts according to the width and then will not overflow!!!
If you simply don't want any scrolling of the page then kindly put overflow in html or body's CSS commands....
I've seen a property that allow you to fill the entire width of a container with text, ala magazine style. It simply increases the space between words to accommodate for the additional space.
What is this property?
You're thinking of text-align: justify.
div {
text-align: justify;
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec nisl ipsum, at ullamcorper justo. Vivamus ac dui lorem. Aliquam nec diam urna, in semper augue. Etiam commodo dui velit. Vestibulum in nibh nulla, a feugiat justo. Proin accumsan, tellus et condimentum laoreet, lacus lorem consequat nisi, ac fermentum velit eros at metus. Aliquam lacinia mollis felis, vel pretium nulla condimentum consectetur. Quisque in mattis nibh. Nunc adipiscing tincidunt elit, vitae pellentesque felis molestie ac. Fusce vestibulum dui in nibh gravida ut placerat ligula porta. Ut sem lectus, condimentum nec tincidunt a, imperdiet vitae risus.</div>