How to expand text to full DIV width

Question

I have a div with a text like this:

<div class="somos-especialistas">
<p><span style="color: #ff7a00;">Especialistas en climatizaci&oacute;n</span> <span     style="color: #0092d4;">y deshumidificaci&oacute;n de piscinas</span></p>
</div>

And I want the text inside the p tag to expand to full width of the container div.

CSS for the div:

.somos-especialistas 
{
    width: 960px;
    font-stretch: expanded;
}

I used font-stretch: expanded; but it doesn't work. I saw that it doesn't have support on many browsers. Any idea on how to get that?

JsFiddle: check code here

Check out http://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container — sphair, Dec 12 '12 at 10:43
`font-stretch` has nothing to do with what you want. It's a way to invoke "wider" variants of certain fonts. By the way, if you're going to use `text-align`, you're probably also going to want to look at `text-align-last`. If you want the font size to actually increase, search for relevant answers here on SO, but you are either going to end up using script, or SVG could be your friend here. — , Dec 12 '12 at 11:01

score 3 · Answer 1 · edited Mar 11 '14 at 09:38

3

Add the following style to your CSS class.

text-align:justify;

edited Mar 11 '14 at 09:38

Ondrej Kvasnovsky

4,592
3
30
40

answered Dec 12 '12 at 10:57

naresh kumar

2,165
3
19
21

2

`text-align` only takes effect once the text needs wrapping (once the text is too long for a single line and needs to be broken amongst two lines) – loic.jaouen Jan 20 '17 at 09:26

score 2 · Accepted Answer · answered Dec 12 '12 at 10:50

If you do not have dynamic text inside, you can use letter spacing

letter-spacing:9px;

http://jsfiddle.net/sQ9ck/2/

or word-spacing

word-spacing:70px;

http://jsfiddle.net/sQ9ck/6/

Or a combination of both

letter-spacing:5px;
word-spacing:44px;

http://jsfiddle.net/sQ9ck/10/

score 0 · Answer 3 · answered Oct 07 '18 at 01:45

If the text is not dynamic Ashwin Singh´s answer will do the trick.

If it is dynamic then we need a script to set letter-spacing or word-spacing based on the width of the other element. First, calculate the width difference between the two elements. Then divide that with the number of characters of the element that needs to be wider. That's the spacing that should be added to each character.

const diff = elementOne.offsetWidth - elementTwo.offsetWidth;
const letterSpacing = diff / elementTwo.innerHTML.length;

Here's an example:

const timeAndDate = () => {
  const dateElement = document.getElementById('date');
  const clockElement = document.getElementById('clock');
  const date = new Date();
  const time = `${getFakeHour()}:${getInitZero(date.getMinutes())}:${getInitZero(date.getSeconds())}`;
  
  clockElement.innerHTML = time;
  dateElement.innerHTML = `${weekDay(date.getDay())} ${date.getDate()} ${month(date.getMonth())}`;
  
  dateElement.removeAttribute('style');
  const widthDiff = clockElement.offsetWidth - dateElement.offsetWidth;
  const letterSpacing = widthDiff / dateElement.innerHTML.length;
  dateElement.style.letterSpacing = `${letterSpacing + 2}px`;
  
  setTimeout(timeAndDate, 1000); 
}

const getInitZero = (value) => {
    return value < 10 ? '0' + value : value;
}

const getFakeHour = () => {
    return Math.floor(Math.random() * 14);
}

const weekDay = (date) => {
    switch (date) {
        case 1:
            return 'Mon';
        default:
            return 'Fri';
    }
}

const month = (month) => {
    switch (month - 1) {
        case 1:
            return 'Jan';
        case 2:
            return 'Feb';
        default:
            return 'Dec';
    }
}

timeAndDate();

.flex-container {
  display: flex;
}
.date {
    display: inline-block;
    font-size: 3rem;
  margin: 0;
}

.time {
    font-size: 8rem;
}

<div class="flex-container">
  <div class="date-time">
    <p class="date" id="date">ds</p>
    <div class="time" id="clock"></div>
  </div>
</div>

.

How to expand text to full DIV width

3 Answers3