CODEWITHSUNDEEP
css
Sonhja
Sonhja

Reputation: 8448

How to expand text to full DIV width

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

Upvotes: 2

Views: 10859

Answers (3)

Calsal
Calsal

Reputation: 1485

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>

.

Upvotes: 0

naresh kumar
naresh kumar

Reputation: 2241

Add the following style to your CSS class.

text-align:justify;

Upvotes: 3

Ashwin Singh
Ashwin Singh

Reputation: 7365

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/

Upvotes: 2

Related Questions