代码之家 › 专栏 › 技术社区 › usernameabc

如何在文本之间插入换行符?

border css html

usernameabc · 技术社区 · 5 年前

我必须在文本周围添加行,中间有空格,这样就不仅仅是添加边框的问题了。下面是预期的结果,但我不确定从何处开始修改边框,使其具有如图所示的间隙。

他们一定是 10px 从侧面看。所以最重要的应该是从右边。最下面的应该是 10像素 从左边。
空间可以是 8px 16px 宽度。
边界应该是 1px 3px 基于什么是可能的。

对于解决方案,如果需要更多的html元素,或者如果我们必须以任何css伪元素为目标,那么就可以了。

期望输出:

我尝试了以下方法,但无法使其像图像那样工作。

.box { 
  border-top:    1px solid black;
  border-right:  1px solid black; 
  border-bottom: 1px solid black;
}

<div class="box">
Some text inside
</div>

0 回复 | 直到 5 年前

Temani Afif 5 年前

.box { 
  padding:20px;
  display:inline-block;
  border-right:2px solid;
  border-left:2px solid;
  background:
    linear-gradient(to left ,#000 10px,transparent 10px 30px,#000 0) top,
    linear-gradient(to right,#000 10px,transparent 10px 30px,#000 0) bottom;
  background-size:100% 2px;
  background-repeat:no-repeat;
}

<div class="box">
Some text inside
</div>

使用CSS变量使其易于调整:

.box { 
  --b:2px;  /* Thickness of border */
  --g:10px; /* The gap */
  --s:10px; /* The offset of the gap */
  
  --grad:#000 var(--s),transparent var(--s) calc(var(--s) + var(--g)),#000 0;
  padding:20px;
  display:inline-block;
  border-right:var(--b) solid;
  border-left:var(--b) solid;
  background:
    linear-gradient(to left ,var(--grad)) top,
    linear-gradient(to right,var(--grad)) bottom;
  background-size:100% var(--b);
  background-repeat:no-repeat;
}

<div class="box">
Some text inside
</div>

<div class="box" style="--s:20px;--g:50%;--b:5px;">
Some text 
</div>

<div class="box" style="--s:80%;--g:10%;--b:1px">
Some text<br> inside
</div>

.box { 
  --b:2px;  /* Thickness of border */
  --g:10px; /* The gap */
  --s:10px; /* The offset of the gap */

  padding:20px;
  display:inline-block;
  border:var(--b) solid;
  clip-path:polygon(0 0, 
  
    calc(100% - var(--s) - var(--g)) 0,
    calc(100% - var(--s) - var(--g)) var(--b),
    calc(100% - var(--s))            var(--b),
    calc(100% - var(--s))            0,
  
    100% 0,100% 100%, 
    
    calc(var(--s) + var(--g)) 100%,
    calc(var(--s) + var(--g)) calc(100% - var(--b)),
    var(--s)                  calc(100% - var(--b)),
    var(--s)                  100%,
    
    0 100%);
}

<div class=“box”>
里面有些文字

<div class=“box”style=“--s:20px--g:50%--b:5倍&燃气轮机;
</部门>

<div class=“box”style=“--s:80%--g:10%--b:1px“>
一些文本<br>里面
</部门>

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

4 月前

Mass · 如何在Tailwind CSS v4中创建配置

4 月前

magenta placenta · 将css变量合并为一个变量

4 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

4 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

4 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

4 月前

Luckkks · 过渡色工作不正常

4 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

4 月前