2

This was a very hard question to Google since there are lot of similar problems with similar wordings. To be specific, what I'm after is purely for aesthetic purposes:

A long string can wrap like
this.

...but:

I would prefer it
to wrap like this.

Note that though these are both two lines, they do not necessarily need to be two lines. Shorter lines will still appear as normal:

Short Title...

...and you could have even longer lines:

This is what a
solution might
look like if it
spanned multiple
lines.

Here's the exact problem I'm trying to solve.

I'd prefer it to balance the length of each line, even if there is more space on the left and right side of the text. The idea is that each line has a consistent width with the one above it.

The problem is that the text to be wrapped is dynamic and can have any length. I wonder if there is a way to do this non-programmatically.

I believe there should be a few ways to do this in JavaScript but first I'd like to exhaust my options with modern HTML and CSS.

Thanks!

Thomas
  • 701
  • 2
  • 8
  • 23
  • 1
    [CSS Text Module Level 4](https://www.w3.org/TR/css-text-4/) has a [`text-wrap` property](https://www.w3.org/TR/css-text-4/#propdef-text-wrap) that let's you specify a `balance` value, but this doesn't seem to be implemented by browsers yet. – Sean Mar 07 '22 at 17:57
  • 1
    AFIAK, no. There's `text-align: justify` but it doesn't work on the last line. `text-align: justify-all` is what you want but no browser has that yet. – zer00ne Mar 07 '22 at 17:58
  • 1
    @zer00ne `justify-all` will just justify all lines; it won't do anything to change or balance the amount of text on each line. – Sean Mar 07 '22 at 18:00
  • Will you be happy with js solution? I don' t thinkyou could implement it use pure css since how do you tell broswer you want two lines only? – James Mar 07 '22 at 19:16
  • 1
    OP: *"......even if there is more space on the left and right side of the text."* So, it's not really perfect OP is looking for. – zer00ne Mar 07 '22 at 19:48
  • @Sean very interesting, thanks! Would be keen to see how quickly it's adopted. Thankfully I do not need to support all browsers; I'm developing an Electron app. – Thomas Mar 07 '22 at 20:20
  • @James A JS solution is "fine" and I could spin one up for this problem but I'm concerned about long words, weird spaces, and other edge cases. A solution is not intended to always be on two lines, and I will amend my question. – Thomas Mar 07 '22 at 20:22
  • If it's definitely not yet possible with "widely adopted" features in most modern browsers or even in some nightly versions of browsers, I'll accept that as an answer. I'll then start to implement it in JS. – Thomas Mar 07 '22 at 20:30
  • @Thomas, I post an answer use css `ch`. Check if it works for you? – James Mar 07 '22 at 20:47

2 Answers2

1

Maybe use the css ch unit and a use of javascript.

The use of filter is to remove the white space.

function divide(line){
const length = document.querySelector('div').textContent.split('').filter(i=>i!=" ").length;
document.querySelector('div').style.width = `${length/line}ch`
}
divide(3)
<div>I would prefer it to wrap like this.</div>

function divide(line) {
  const length = document.querySelector('div').textContent.split('').filter(i => i != " ").length;
  document.querySelector('div').style.width = `${length/line}ch`
}
divide(4)
<div>This is what a solution might look like if it spanned multiple lines.
</div>
James
  • 2,732
  • 2
  • 5
  • 28
  • 1
    It's a decent idea that I can work with, thanks! There are several issues that I'll need to resolve related to this but as far as the question goes, this helps. I'll keep the question open for a little while longer before accepting in case there's a pure CSS solution. – Thomas Mar 08 '22 at 20:39
-1

I think if you use div and change his width

<!DOCTYPE html>
<html>
 <head>
  <style>
   .myDiv {    
    text-align: center;
    width: 100px;
   }
  </style>
 </head>
 <body>
  <h1>Normal text Normal text Normal text</h1>
  <div class="myDiv">
   <h2>Div text Div text Div text Div text Div text Div text</h2>
  </div>
  <h1>Normal text Normal text Normal text</h1>
 </body>
</html>

Doing it in the same css and html is probably impossible but I found using javascript

Here you have the link

KruII
  • 88
  • 6
  • "The problem is that the text to be wrapped is dynamic and can have any length. I wonder if there is a way to do this non-programmatically." – Sean Mar 07 '22 at 18:02
  • This program adjusts the maximum length of the text per line – KruII Mar 07 '22 at 18:03
  • Can you explain to me better what the problem is? – KruII Mar 07 '22 at 18:04
  • 1
    They want a solution that will balance the text regardless of the length of the text, without having to manually set the width individually for every possible title. – Sean Mar 07 '22 at 18:13
  • Thank you for answering. Indeed, I was hoping to see if modern browsers had a way around this without scripting. If it's not possible, I'd attempt it in JS, but I don't want to reinvent the wheel as it can be quite complex with the variety of languages and titles. – Thomas Mar 07 '22 at 20:32