Question

我正在尝试使用css格式化文本制作徽标，但我希望文本动态更改并适合DIV容器（页面宽度的1/3），因为它会更改大小并扩展文本行填充DIV的宽度直到左右两侧。

目前我有以下HTML：

     #logo_container{
     float:left;
     height:10vw;
     width:calc(100% / 3);
     margin:0;
     }

     .logo_name{
     font-family: 'Catamaran', sans-serif;
     font-size:3vw;
     line-height:2vw;
     font-weight:100;
     color:white;
     }

     .logo_title{
     font-family: 'Catamaran', sans-serif;
     font-weight:100;
     font-size:1.69vw;
     line-height:0.5vw;
     color:white;
     }

     .logo_website{
     font-family: 'Catamaran', sans-serif;
     font-weight:500;
     line-height:1.5vw;
     font-size:2vw;
     color:white;
     letter-spacing: 0.3vw;
     }

和CSS：

function toMin(str) {
  var match = str.match(/(\d+):(\d+)\s(AM|PM)/)
  var min = (+match[1] > 11 ? 0 : match[1] * 60) + +match[2];
  if (match[3].toLowerCase() == 'pm') {
    min += 720;
  }
  return min;
}

function gt(v1, v2) {
  snippet.log(v1 + ' > ' + v2 + ': ' + (toMin(v1) > toMin(v2)))
}

function lt(v1, v2) {
  snippet.log(v1 + ' < ' + v2 + ': ' + (toMin(v1) < toMin(v2)))
}

//then

gt('12:30 AM', '01:00 AM');
lt('12:30 AM', '01:00 AM');

Answer 1

我试了一下，不确定它是不是你想要的。仅使用Chrome测试。不得不改变跨度到div ... 希望这会有所帮助：JsFiddle

<div id="logo_container">
       <div class="auto logo_name"> James Mitchell</div>
       <div class="auto logo_title"> Consultant ENT Surgeon</div>
       <div class="auto logo_website"> enthealth.co.uk</div>
</div>


body {
    background-color:black;
}

div.auto {
    height:33.33%;
    display:table-row;
    border: 1px solid yellow;
}

#logo_container {
     float:left;
     height:10vw;
     width:calc(100% / 3);
     margin:0;
     border: 1px solid red;
    display:table;
}

.logo_name{
     font-family: 'Catamaran', sans-serif;
     font-size:4.5vw;
     font-weight:100;
     color:white;
}

.logo_title{
     font-family: 'Catamaran', sans-serif;
     font-weight:100;
     font-size:1.69vw;
     color:white;
}

.logo_website{
     font-family: 'Catamaran', sans-serif;
     font-weight:500;
     font-size:2vw;
     color:white;
     letter-spacing: 0.3vw;
}

Answer 2

如果你不介意改变你的HTML，你可以试试这个：

＆＃13;

body {
  background: black;
}
#logo_container > div:after {
/*this is what I have added*/
  content: "";
  display: inline-block;
  width: 100%;
}
#logo_container {
  float: left;
  height: 10vw;
  width: calc(100% / 3);
  margin: 0;
  text-align: justify; /* this line is new too*/
}
.logo_name {
  font-family: 'Catamaran', sans-serif;
  font-size: 3vw;
  line-height: 2vw;
  font-weight: 100;
  color: white;
}
.logo_title {
  font-family: 'Catamaran', sans-serif;
  font-weight: 100;
  font-size: 1.69vw;
  line-height: 0.5vw;
  color: white;
}
.logo_website {
  font-family: 'Catamaran', sans-serif;
  font-weight: 500;
  line-height: 1.5vw;
  font-size: 2vw;
  color: white;
  letter-spacing: 0.3vw;
}
#logo_container > div {
  padding-bottom: 5px;
}

＆＃13;

<div id="logo_container">
  <div class="auto logo_name">J a m e s &nbsp; M i t c h e l l</div>
  <div class="auto logo_title">C o n s u l t a n t &nbsp; E N T &nbsp; S u r g e o n</div>
  <div class="auto logo_website">e n t h e a l t h . c o . u k</div>
</div>

＆＃13;

另外，您可以使用每行的letter-spacing属性

动态合理的徽标文本

2 个答案: