如何使用CSS控制单词之间的间距

时间:2017-10-29 19:20:16

标签: css html5

我正在格式化包含bio的网页。单词间距关闭,如下图所示:

enter image description here

请告知我如何更改CSS以获得正确的字间距:

.column1 {
  float: left;
  margin-right: 40px;
}

.column2 {
            
}
     
p { 
  color: #000000; 
  letter-spacing: normal;
  font-family: 'Helvetica Neue', sans-serif; 
  font-size: 14px; 
  line-height: 24px; 
  margin: 0 0 24px; 
  text-align: justify; 
  text-justify: inter-word; 
}
<div class="column1"> 
<img alt="" src="/portals/2/Martin%20Profile.jpg" style="width: 100px; height: 100px;" title="" />
<br> Apptiv Solutions
<br> Founded 2015 
<br> Martin Muldoon
<br> Founder 
</div> 

<div class="column2">
<p>Martins introduction to the Brewing Industry first took place in 1995. While working as a Development Engineer at Trigen Energy Corporation, he was called upon to assist in the acquisition of the power plant assets of the Coors Brewery in Golden Colorado. To this day, the Coors plant is the largest single site brewery on earth providing 30% of all beer in the U.S.</p>
</div>

1 个答案:

答案 0 :(得分:2)

这是由理由造成的。你也有一些错别字,额外的"normal-family将是font-family&amp; letter-spacing应该有pxemrem等单位值。

如果您希望在桌面上保持对齐,可以使用媒体查询在移动视图上将text-align设置为左侧。否则,只需删除所有视图的对齐以避免间距(调整值对您有利):

@media (max-width: 414px) {
  p {
    text-align: left;
  }
}

Working Resizable Fiddle