Question

所以我想为h3标签添加边框。
此边框需要跨越最长部分的宽度可见的文字，没有进一步的。
目前这个边框似乎跨越了整个包装的宽度格。

对我来说似乎很奇怪，在h标签上添加显示内联块并不能为我提供我所追求的结果。

＆＃13;

div {
  max-width: 180px;
}
h3 {
  display: inline-block;
  border-bottom: 2px solid green;
}

＆＃13;

<div>
  <h3>Lorem Ipsum Dolar.....</h3>
</div>

＆＃13;

编辑：似乎有些人不知道最大宽度是必需的。

这就是排队的方式。

嗯......似乎用CSS无法实现完美的解决方案。但是我使用了@Muhammad Usman示例并添加了bottom: -120%;并用边框属性替换了高度和背景。适用于2行文字。

＆＃13;

div {
  max-width: 200px;
  border: dashed 1px grey;
}
h3 {
  display: inline;
  font-size: 1.6em;
  position: relative;
}
h3::after {
  border-bottom: 4px solid green;
  bottom: -120%;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
}

＆＃13;

<div>
  <h3>Lorem Ipsum Dolar</h3>
  <p>Lorem ipsum dolar set ammet Lorem ipsum dolar set ammet Lorem ipsum dolar set ammet Lorem ipsum dolar set ammet Lorem ipsum dolar set ammet</p>
</div>

＆＃13;

Answer 1

只需删除最大宽度，然后只使用display: inline-block

div {
  }
h3 {
  display: inline-block;
  border-bottom: 2px solid green;
  }

<div>
<h3>Lorem Ipsum Dolar.....</h3>
 </div>

Answer 2

这就是你想要的吗？

＆＃13;

div {
  max-width: 180px;
  width:111px;
}
h3 {
  display: inline-block;
  border-bottom: 2px solid green;
}

＆＃13;

<div>
  <h3>Lorem Ipsum Dolar.....</h3>
</div>

＆＃13;

Answer 3

添加显示：“div”的内联属性

 div {
        max-width: 180px;
        display: inline;
    }

Answer 4

＆＃13;

div {
  max-width: 180px;
}

h3 {
  position: relative;
  display: inline;
}


h3:before {
  position: absolute;
  background: green;
  content: '';
  height: 2px;
  left: 0;
  right: 0;
  bottom: -4px;
}

＆＃13;

<div>
  <h3>Lorem Ipsum Dolar Lorem Ipsum Dolar gnhhjkui abc .....</h3>
</div>

＆＃13;

Answer 5

所以我想我会更新这个问题，因为没有其他人找到答案。

使用flexbox时可以使用div包装title标签并对其应用flex。

<div class="flex">
<h3>Lorem Ipsum <br>Dolar</h3>
  <p>Lorem ipsum dolar set ammet Lorem ipsum dolar set ammet Lorem ipsum dolar set ammet Lorem ipsum dolar set ammet Lorem ipsum dolar set ammet</p>
</div>

 DELETE FROM 
     creature 
    WHERE 
     id not in 
    (
     SELECT id FROM
      (
       SELECT DISTINCT b.id 
         FROM creature_template a inner join creature b on a.entry = b.id 
        WHERE b.map != 571 AND a.`type` = 1 AND a.`type` = 10
      ) A
    );

在标题标签上显示内联块

5 个答案: