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

我使用了 font-stretch：expanded; ，但它不起作用。我看到它在许多浏览器上都没有支持。关于如何获得它的任何想法？

的jsfiddle： check code here

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´s answer可以解决问题。

如果它是动态的，那么我们需要一个脚本来根据其他元素的宽度设置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>

。

如何将文本扩展为完整的DIV宽度

3 个答案: