단어 중간에 가로줄을위한 CSS 기술

중간에 텍스트가있는 수평 규칙을 만들려고합니다. 예를 들면 다음과 같습니다.

----------------------------------- 내 제목은 여기 ------------ -----------------

CSS에서 그렇게하는 방법이 있습니까? 모든 "-"없이 분명히 대시.

이것은 대략 내가하는 일입니다. 선 border-bottom에 포함 h2을 설정 한 다음 h2더 작게 line-height만듭니다. 그런 다음 텍스트가 span불투명 한 배경 으로 중첩 됩니다.

h2 {
   width: 100%; 
   text-align: center; 
   border-bottom: 1px solid #000; 
   line-height: 0.1em;
   margin: 10px 0 20px; 
} 

h2 span { 
    background:#fff; 
    padding:0 10px; 
}

<h2><span>THIS IS A TEST</span></h2>
<p>this is some content other</p>

Chrome에서만 테스트했지만 다른 브라우저에서 작동하지 않을 이유는 없습니다.

JSFiddle : http://jsfiddle.net/7jGHS/

다른 솔루션을 시도한 후 다른 텍스트 너비, 가능한 배경 및 추가 태그를 추가하지 않고 유효한 것을 제공했습니다.

h1 {
  overflow: hidden;
  text-align: center;
}

h1:before,
h1:after {
  background-color: #000;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}

h1:before {
  right: 0.5em;
  margin-left: -50%;
}

h1:after {
  left: 0.5em;
  margin-right: -50%;
}

<h1>Heading</h1>
<h1>This is a longer heading</h1>

IE8, IE9, Firefox 및 Chrome에서 테스트했습니다. 여기서 확인할 수 있습니다 http://jsfiddle.net/Puigcerber/vLwDf/1/

좋아, 이것은 더 복잡하지만 IE <8 이외의 모든 것에서 작동합니다.

<div><span>text TEXT</span></div>

div {
    text-align: center;
    position: relative;
}
span {
    display: inline-block;    
}
span:before,
span:after {
    border-top: 1px solid black;
    display: block;
    height: 1px;
    content: " ";
    width: 40%;
    position: absolute;
    left: 0;
    top: 1.2em;
}
span:after {
   right: 0;  
   left: auto; 
}

: before 및 : after 요소는 절대적으로 배치되므로 하나는 왼쪽으로, 하나는 오른쪽으로 당길 수 있습니다. 또한 너비 (이 경우 40 %)는 텍스트 내부의 너비에 매우 의존합니다. 그에 대한 해결책에 대해 생각해야합니다. 최소한 top: 1.2em글꼴 크기가 다른 경우에도 줄이 텍스트 중앙에 어느 정도 유지됩니다.

그래도 잘 작동하는 것 같습니다 : http://jsfiddle.net/tUGrf/3/

가장 짧고 가장 좋은 방법 :

span:after,
span:before{
    content:"\00a0\00a0\00a0\00a0\00a0";
    text-decoration:line-through;
}

<span> your text </span>

Flex 기반 솔루션은 다음과 같습니다.

h1 {
  display: flex;
  flex-direction: row;
}
h1:before, h1:after{
  content: "";
  flex: 1 1;
  border-bottom: 1px solid #000;
  margin: auto;
}
h1:before {
  margin-right: 10px
}
h1:after {
  margin-left: 10px
}

<h1>Today</h1>

JSFiddle : https://jsfiddle.net/yoshiokatsuneo/3h1fmj29/

나중에 (현재) 브라우저 및 display:flexandd를 pseudo-elements 사용하면 쉽게 그릴 수 있습니다. border-style, box-shadow심지어 background화장 너무 도움이됩니다.

h1 {margin-top:50px;
  display:flex;
  background:linear-gradient(to left,gray,lightgray,white,yellow,turquoise);;
}
h1:before, h1:after {
  color:white;
  content:'';
  flex:1;
  border-bottom:groove 2px;
  margin:auto 0.25em;
  box-shadow: 0 -1px ;/* ou 0 1px si border-style:ridge */
}

<h1>side lines via flex</h1>

<div><span>text TEXT</span></div>

div { 
  height: 1px; 
  border-top: 1px solid black; 
  text-align: center; 
  position: relative; 
}
span { 
  position: relative; 
  top: -.7em; 
  background: white; 
  display: inline-block; 
}

텍스트와 선 사이에 더 많은 공간을 만들려면 스팬을 패딩으로 지정하십시오.

예 : http://jsfiddle.net/tUGrf/

나는이 간단한 장식을위한 몇 가지 해결책을 찾고 있었고 글꼴과 bla, bla, bla의 높이를 계산하기 위해 JS조차도 꽤 몇 가지, 이상한 것도 발견했습니다. 이 게시물에 하나의 코멘트 읽어 thirtydot 에 대해 말하기를 fieldset하고 legend나는 그것을라고 생각했습니다.

나는 그 두 가지 요소 스타일을 재정의하고 있습니다 .W3C 표준을 복사하여 .middle-line-text클래스 (또는 호출하려는 모든 것)에 포함시킬 수 는 있지만 이것이 내가 한 일입니다.

<fieldset class="featured-header">
    <legend>Your text goes here</legend>
</fieldset>

<style>
.featured-header{
    border-bottom: none;
    border-left: none;
    border-right: none;
    text-align: center;
 }

.featured-header legend{
    -webkit-padding-start: 8px; /* It sets the whitespace between the line and the text */
    -webkit-padding-end: 8px; 
    background: transparent; /** It's cool because you don't need to fill your bg-color as you would need to in some of the other examples that you can find (: */
    font-weight: normal; /* I preffer the text to be regular instead of bold  */
    color: YOU_CHOOSE;
}   

</style>

바이올린은 다음과 같습니다. http://jsfiddle.net/legnaleama/3t7wjpa2/

테두리 스타일로 연주했으며 Android에서도 작동합니다.) (kitkat 4.XX에서 테스트)

편집하다:

좋은 옵션 인 Bekerov Artur의 아이디어에 따라 .png base64 이미지를 .SVG로 획을 만들기 위해 변경했습니다.

/* SVG solution based on Bekerov Artur */
/* Flexible solution, scalable, adaptable and also color customizable*/
.stroke {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='1px' height='1px' viewBox='0 0 1 1' enable-background='new 0 0 1 1' fill='%23ff6600' xml:space='preserve'><rect width='1' height='1'/></svg>");
background-repeat: repeat-x;
background-position: left;
text-align: center;
}
.stroke h3 {
background-color: #ffffff;
margin: 0 auto;
padding:0 10px;
display: inline-block;
font-size: 66px;
}

IE8 이상을위한 솔루션 ...

주목할만한 문제 :

사용하여 background-color테두리를 마스크하는 것이 최선의 해결책이 될하지 않을 수 있습니다. 복잡한 (또는 알려지지 않은) 배경색 (또는 이미지)이 있으면 마스킹이 실패합니다. 또한 텍스트의 크기를 조정하면 흰색 배경색 (또는 설정 한 것)이 위 또는 아래 줄의 텍스트를 덮기 시작합니다.

또한 컨텐트의 너비가 변하는 반응 형 사이트에서는 스타일을 매우 유연하게 구현할 수없고 구현하기가 거의 불가능하기 때문에 섹션의 넓이 를 "추측" 하고 싶지 않습니다 .

해결책:

( JSFiddle 보기 )

로 테두리를 "마스킹"하는 대신 속성을 background-color사용하십시오 display.

HTML

<div class="group">
    <div class="item line"></div>
    <div class="item text">This is a test</div>
    <div class="item line"></div>
</div>

CSS

.group { display: table; width: 100%; }
.item { display: table-cell; }
.text { white-space: nowrap; width: 1%; padding: 0 10px; }
.line { border-bottom: 1px solid #000; position: relative; top: -.5em; }

요소에 font-size속성을 배치하여 텍스트 크기를 조정하십시오 .group.

한계 :

• 여러 줄 문자가 없습니다. 한 줄만.
• HTML 마크 업은 우아하지 않습니다
• top.line요소의 속성은 절반이어야 line-height합니다. 당신이있는 경우에 그래서, line-height의 1.5em, 그 다음이 top되어야한다 -.75em. 자동화되지 않았기 때문에 제한 사항이며 이러한 스타일을 다른 선 높이를 가진 요소에 적용하는 경우 스타일을 다시 적용해야 할 수 있습니다 line-height.

저에게는 이러한 제한이 대부분의 구현에 대한 답변의 시작 부분에서 언급 한 "문제"보다 중요합니다.

이렇게하면 줄 길이가 고정되어 있지만 훌륭하게 작동합니다. 줄 길이는 '\ 00a0'(유니 코드 공간)을 추가하거나 사용하여 제어됩니다.

h1:before, h1:after {
  content:'\00a0\00a0\00a0\00a0';
  text-decoration: line-through;
  margin: auto 0.5em;
}

<h1>side lines</h1>

누구든지 제목을 왼쪽으로 고정 거리로 표시하고 (위에 표시된 것처럼 중앙에 위치하지 않도록) 궁금한 점이 있으면 @Puigcerber의 코드를 수정하여 알아 냈습니다.

h1 {
  white-space: nowrap;
  overflow: hidden;
}

h1:before, 
h1:after {
  background-color: #000;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
}

h1:before {
  right: 0.3em;
  width: 50px;
}

h1:after {
  left: 0.3em;
  width: 100%;
}

여기 JSFiddle 입니다.

h6 {
    font: 14px sans-serif;
    margin-top: 20px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 900;
}

    h6.background {
        position: relative;
        z-index: 1;
        margin-top: 0%;
        width:85%;
        margin-left:6%;
    }

        h6.background span {
            background: #fff;
            padding: 0 15px;
        }

        h6.background:before {
            border-top: 2px solid #dfdfdf;
            content: "";
            margin: 0 auto; /* this centers the line to the full width specified */
            position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
            top: 50%;
            left: 0;
            right: 0;
            bottom: 0;
            width: 95%;
            z-index: -1;
        }

이것은 당신을 도울 것입니다

테이블 레이아웃을 사용하여 측면을 동적으로 채우고 동적 수직 위치 지정을 위해 0 높이의 절대 위치 div를 채 웁니다.

• 하드 코딩 된 치수 없음
• 이미지가 없습니다
• 의사 요소가 없음
• 배경 존중
• 컨트롤 바 모양

https://jsfiddle.net/eq5gz5xL/18/

실제 중심보다 약간 아래에서 텍스트가 가장 잘 보입니다. 이 위치를 조정할 수 있습니다 55%(높이가 높을수록 막대가 낮아짐). 선의 모양은 위치에 따라 변경 될 수 있습니다 border-bottom.

HTML :

<div class="title">
  <div class="title-row">
    <div class="bar-container">
      <div class="bar"></div>
    </div>
    <div class="text">
      Title
    </div>
    <div class="bar-container">
      <div class="bar"></div>
    </div>
  </div>
</div>

CSS :

.title{
  display: table;
  width: 100%
  background: linear-gradient(to right, white, lightgray);
}
.title-row{
  display: table-row;
}
.bar-container {
  display: table-cell;
  position: relative;
  width: 50%;
}
.bar {
  position: absolute;
  width: 100%;
  top: 55%;
  border-bottom: 1px solid black;
}
.text {
  display: table-cell;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 36px;
}

죽은 말을 이길 수는 없지만 해결책을 찾고 있었고 여기까지 왔으며 옵션에 만족하지 못했습니다. 적어도 어떤 이유로 든 제공된 솔루션을 얻을 수 없었습니다. (아마도 내 실수로 인한 것 같습니다 ...) 그러나 flexbox를 가지고 놀았고 여기 내가 직접 일한 것이 있습니다.

일부 설정은 배선이되어 있지만 데모 목적으로 만 사용됩니다. 이 솔루션은 거의 모든 최신 브라우저에서 작동해야한다고 생각합니다. .flex-parent 클래스의 고정 설정을 제거 / 조정하고 색상 / 텍스트 / 물건을 조정하면이 접근법에 만족할 것입니다.

HTML :

.flex-parent {
  display: flex;
  width: 300px;
  height: 20px;
  align-items: center;
}

.flex-child-edge {
  flex-grow: 2;
  height: 1px;
  background-color: #000;
  border: 1px #000 solid;
}
.flex-child-text {
  flex-basis: auto;
  flex-grow: 0;
  margin: 0px 5px 0px 5px;
  text-align: center;
}

<div class="flex-parent">
  <div class="flex-child-edge"></div>
  <div class="flex-child-text">I found this simpler!</div>
  <div class="flex-child-edge"></div>
</div>

또한 여기에 솔루션을 저장했습니다 : https://jsfiddle.net/Wellspring/wupj1y1a/1/

누구나 원하는 경우 CSS를 사용하는 최상의 솔루션 인 IMHO는 flexbox를 사용하는 것입니다.

예를 들면 다음과 같습니다.

.kw-dvp-HorizonalButton {
    color: #0078d7;
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
}
.kw-dvp-HorizonalButton:before, .kw-dvp-HorizonalButton:after {
    background-color: #0078d7;
    content: "";
    display: inline-block;
    float:left;
    height:1px;
}
.kw-dvp-HorizonalButton:before {
    order:1;
    flex-grow:1;
    margin-right:8px;
}
.kw-dvp-HorizonalButton:after {
    order: 3;
    flex-grow: 1;
    margin-left: 8px;
}
.kw-dvp-HorizonalButton * {
    order: 2;
}

    <div class="kw-dvp-HorizonalButton">
        <span>hello</span>
    </div>

이렇게하면 항상 선과 내용 사이의 여백을 쉽게 제어 할 수 있도록 선이 왼쪽과 오른쪽으로 완벽하게 중앙에 정렬 된 컨텐츠가 만들어집니다.

상단 컨트롤 전후에 선 요소를 만들고 플렉스 컨테이너에서 순서 1,3으로 설정하고 내용을 순서 2 (중간으로 이동)로 설정합니다. 이전 / 이후에 1을 늘리면 콘텐츠를 중앙에 유지하면서 가장 빈 공간을 똑같이 소비하게됩니다.

도움이 되었기를 바랍니다!

확실하지 않지만 수평 규칙을 사용하여 텍스트를 위쪽 여백 위로 밀어 넣으십시오. 단락 태그와 배경에도 고정 너비가 필요합니다. 그것은 약간 해키이며 모든 브라우저에서 작동하는지 모르겠으며 글꼴 크기를 기준으로 음수 여백을 설정해야합니다. 그러나 크롬에서 작동합니다.

<style>   
 p{ margin-top:-20px; background:#fff; width:20px;}
</style>

<hr><p>def</p>

제안 된 대부분의 방법을 시도했지만 전체 너비 또는 동적 콘텐츠에 적합하지 않음과 같은 문제로 끝납니다. 마지막으로 코드를 수정하고 완벽하게 작동합니다. 이 예제 코드는 전후에 해당 행을 그리고 내용 변경에 유연합니다. 가운데도 정렬되었습니다.

HTML

        <div style="text-align:center"> 
            <h1>
                <span >S</span>
            </h1> 
        </div> 

        <div style="text-align:center"> 
            <h1>
                <span >Long text</span>
            </h1> 
        </div> 

CSS

      h1 {
            display: inline-block;
            position: relative;
            text-align: center;
        }

        h1 span {
            background: #fff;
            padding: 0 10px;
            position: relative;
            z-index: 1;
        }

        h1:before {
            background: #ddd;
            content: "";
            height: 1px;
            position: absolute;
            top: 50%;
            width: calc(100% + 50px);//Support in modern browsers
            left: -25px;
        }

        h1:before {
            left: ;
        }

결과 : https://jsfiddle.net/fasilkk/vowqfnb9/

나 에게이 솔루션은 완벽하게 작동합니다 ...

HTML

<h2 class="strikethough"><span>Testing Text</span></h2>

CSS

.strikethough {
 width:100%; 
 text-align:left; 
 border-bottom: 1px solid #bcbcbc; 
 overflow: inherit;
 margin:0px 0 30px;
 font-size: 16px;
 color:#757575;
 }
.strikethough span {
 background:#fff; 
 padding:0 20px 0px 0px;
 position: relative;
 top: 10px;
}

Bootstrap 4를 사용하는 사람들은이 방법으로 달성 할 수 있습니다. HTML 코드에서 언급 한 클래스는 Bootstrap 4에서 가져온 것입니다.

h1 {
    position: relative;
    flex-grow: 1;
    margin: 0;
}

h1:before {
   content: "";
   display: block;
   border-top: solid 2px blue;
   width: 100%;
   height: 1px;
   position: absolute;
   top: 50%;
   z-index: 1;
 }
 h1 span {
   background: #fff;
   left: 12%;
   padding: 0 15px;
   position: relative;
   z-index: 5;
 }

그리고 이렇게 HTML을 작성하십시오

<div class="d-flex flex-row align-items-center">
  <h1><span> Title </span> </h1>
</div>

중간에 단어가있는 가로 및 세로 선

.box{
    background-image: url("https://i.stack.imgur.com/N39wV.jpg");
    width: 350px;
    padding: 10px;
}

/*begin first box*/
.first{
    width: 300px;
    height: 100px;
    margin: 10px;
    border-width: 0 2px 0 2px;
    border-color: red;
    border-style: solid;
    position: relative;
}

.first span {
    position: absolute;
    display: flex;
    right: 0;
    left: 0;
    align-items: center;
}
.first .foo{
    top: -8px;
}
.first .bar{
    bottom: -8.5px;
}
.first span:before{
    margin-right: 15px;
}
.first span:after {
    margin-left: 15px;
}
.first span:before , .first span:after {
    content: ' ';
    height: 2px;
    background: red;
    display: block;
    width: 50%;
}


/*begin second box*/
.second{
    width: 300px;
    height: 100px;
    margin: 10px;
    border-width: 2px 0 2px 0;
    border-color: red;
    border-style: solid;
    position: relative;
}

.second span {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.second .foo{
    left: -15px;
}
.second .bar{
    right: -15.5px;
}
.second span:before{
    margin-bottom: 15px;
}
.second span:after {
    margin-top: 15px;
}
.second span:before , .second span:after {
    content: ' ';
    width: 2px;
    background: red;
    display: block;
    height: 50%;
}

<div class="box">
    <div class="first">
        <span class="foo">FOO</span>
        <span class="bar">BAR</span>
    </div>

   <br>

    <div class="second">
        <span class="foo">FOO</span>
        <span class="bar">BAR</span>
    </div>
</div>

이것은 https://stackoverflow.com/a/57279326/6569224 에서도 답변됩니다.

• 단일 도트 색상으로 작은 이미지 1x18을 생성 함 # e0e0e0
• 이미지를 base64 코드로 변환

결과:

body
{
  background: #c0c0c0;
}

#block_with_line
{
  width: 100%;
  position: relative;
  height: 18px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAASAQMAAACgmSb/AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAA4ODg8vF4+wAAAAJ0Uk5TAP9bkSK1AAAAEElEQVR4nGNgQAMN6AIMDAAJpACBAQttyAAAAABJRU5ErkJggg==');
}

#block_with_line span
{
  background: #e4e4e4;
  width: 150px;
  display: block;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  margin-left: -75px;
  text-align: center
}

<body>
  <div id="block_with_line">
    <span>text</span>
  </div>
</body>