css - 如何将文本扩展到完整的 DIV 宽度

Question

我有一个带有这样文本的 div：

<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>

我希望p标签内的文本扩展到容器 div 的全宽。

div的CSS：

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

我使用了字体拉伸：扩展；但它不起作用。我看到它在许多浏览器上都不支持。关于如何获得它的任何想法？

JsFiddle： 在这里检查代码

Answer 1

将以下样式添加到您的 CSS 类。

text-align:justify;

Answer 2

如果里面没有动态文本，可以使用字母间距

letter-spacing:9px;

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

或字间距

word-spacing:70px;

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

或两者的结合

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

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

Answer 3

如果文本不是动态的，Ashwin Singh 的答案就可以解决问题。

如果它是动态的，那么我们需要一个脚本来设置letter-spacing或word-spacing基于另一个元素的宽度。首先，计算两个元素之间的宽度差。然后将其除以需要更宽的元素的字符数。这是应该添加到每个字符的间距。

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

这是一个例子：

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>

.