development

사용하지 않고 CSS에서 줄 바꿈하는 방법

big-blog 2020. 2. 27. 22:23

사용하지 않고 CSS에서 줄 바꿈하는 방법
?

산출:

안녕하세요
어떻게 지내

암호:

<p>hello <br> How are you </p>

없이 동일한 출력을 얻는 방법  ?

같은 HTML 구조 불가능, 당신은 구별 할 뭔가가 있어야합니다 Hello및 How are you.

내가 사용하는 것이 좋습니다 span당신이 다음 (단지처럼 블록으로 표시됩니다 것을들 <div>실제로).

HTML :

<p><span>hello</span><span>How are you</span></p>

CSS :

p span 
{
    display: block;
}

개행을 유지하는 white-space: pre;요소를처럼 작동하게하는 데 사용할 수 있습니다 <pre>. 예:

<style>
 p {
  white-space: pre;
 }
</style>
<p>hello
How are you</p>

IE6 또는 IE7에서는 작동하지 않습니다. IE8에 대해 모르겠습니다.

` `정상적으로 사용 하되 `display: none`원하지 않을 때는 숨 깁니다 .

나는이 질문을 찾는 대부분의 사람들이 CSS / 반응 형 디자인을 사용하여 특정 장소에 줄 바꿈이 나타날지 여부를 결정하기를 기대합니다. (그리고 개인에 대한 것이 없습니다  )

즉시 명확하지는 않지만 실제로 태그에 적용 display:none하여  태그를 숨길 수 있으므로 시맨틱 BR 태그와 함께 미디어 쿼리를 사용할 수 있습니다.

 <div>
   The quick brown fox<br />
   jumps over the lazy dog
 </div>

 @media screen and (min-width: 20em) 
 {
    br 
    { 
       display: none;   // hide the BR tag for wider screens (i.e. disable the line break)
    }
 }

이 기능은 텍스트를 정확히 두 줄로 나눠야하는 반응 형 디자인에 유용합니다.

http://jsfiddle.net/nNbD3/1/

공백 및 줄 바꿈 처리를 정의하기위한 몇 가지 옵션이 있습니다. 예를 들어 태그에 내용을 넣을 수 있다면 원하는 것을 쉽게 얻을 수 있습니다.

들어 줄 바꿈이 아닌 공백의 보존 사용 pre-line(하지 pre의 등) :

<style>
 p {
     white-space: pre-line; /* collapse WS, preserve LB */
   }
</style>

<p>hello
How are you</p>

다른 동작이 필요한 경우 다음 중 하나를 선택하십시오 (WS = WhiteSpace, LB = LineBreak).

     white-space: normal;   /* collapse WS, wrap as necessary, collapse LB */
     white-space: nowrap;   /* collapse WS, no wrapping,       collapse LB */
     white-space: pre;      /* preserve WS, no wrapping,       preserve LB */
     white-space: pre-wrap; /* preserve WS, wrap as necessary, preserve LB */
     white-space: inherit;  /* all as parent element */

출처 : W3 Schools

CSS 의 "\ a" 명령은 캐리지 리턴을 생성합니다. 이것은 HTML이 아닌 CSS이므로 추가 마크 업없이 원하는 것에 더 가깝습니다 .

인용 부호에서, 아래 예는 제목과 소스 링크를 모두 표시하고 둘을 캐리지 리턴 ( "\a")으로 구분합니다 .

blockquote[title][cite]:after {
    content:attr(title)"\a"attr(cite)
}

CSS에서 코드를 사용하십시오.

p {
    white-space: pre-line;
}

이 코드를 사용하면 P 태그 안에 들어가는 모든 CSS가 HTML에서 줄 바꿈이됩니다.

이전에 말한 것을 토대로, 이것은 작동하는 순수한 CSS 솔루션입니다.

<style>
  span {
    display: inline;
  }
  span:before {
    content: "\a ";
    white-space: pre;
  }
</style>
<p>
  First line of text. <span>Next line.</span>
</p>

요소에 줄 바꿈이 생기도록하려면 다음을 지정하십시오.

display:block;

블록 레벨 요소 다음에 부동되지 않은 요소가 다음 줄에 나타납니다. 및 <div>와 같은 많은 요소는 이미 블록 레벨 요소이므로 사용할 수 있습니다.

그러나 이것이 알면 좋지만 실제로는 콘텐츠의 맥락에 더 의존합니다. 예를 들어, CSS를 사용하여 줄 바꿈을 강요하지 않을 것입니다. 의미 적으로 p 태그가 표시하는 텍스트에 가장 적합하기 때문에 가 적합합니다. CSS를 중단하기 위해 더 많은 마크 업이 필요하지 않습니다. 기술적 그렇지 않아 정확히 그래서 당신은 무엇을 사용, 단락,하지만 <인사> 태그가 없습니다. HTMl을 사용하여 콘텐츠를 잘 설명하는 것이 훨씬 중요합니다. 그 후 콘텐츠를 예쁘게 만드는 방법을 찾아보십시오.

<pre> <---------------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</pre> <--------------------------------------

또는

<div style="white-space:pre">  <-----------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</div>                         <-----------------------------------

출처 : https://stackoverflow.com/a/36191199/2377343

다음은 나쁜 질문에 대한 나쁜 해결책이지만 문자 그대로 요약을 충족시키는 것입니다.

p {
    width : 12ex;
}

p:before {
    content: ".";
    float: right;
    padding-left: 6ex;
    visibility: hidden;
}

링크 목록

다른 답변은 상황에 따라 줄 바꿈을 추가하는 좋은 방법을 제공합니다. 그러나 :after선택기는 아래에 언급 된 이유로 링크 목록 (및 유사 항목)에 대한 CSS 제어를 위해이를 수행하는 더 좋은 방법 중 하나입니다 .

다음은 목차를 가정 한 예입니다.

<style type="text/css">
    .toc a:after{ content: "\a"; white-space: pre; }
</style>

<span class="toc">
    <a href="#a1">Item A1</a> <a href="#a2">Item A2</a>
    <a href="#b1">Item B1</a> <a href="#b2">Item B2</a>
</span>

그리고 여기 간단하고 호환되는 Simon_Weaver의 기술이 있습니다. 스타일과 내용을 많이 구분하지 않고 더 많은 코드가 필요하며 사실 이후에 나누기를 추가하려는 경우가 있습니다. 그래도 여전히 오래된 IE의 경우 훌륭한 솔루션입니다.

<style type="text/css">
    .toc br{ display: none; } /* comment out for horizontal links */
</style>

<span class="toc">
    <a href="#a1">Item A1</a><br/> <a href="#a2">Item A2</a><br/>
    <a href="#b1">Item B1</a><br/> <a href="#b2">Item B2</a><br/>
</span>

위 솔루션의 장점에 유의하십시오.

HTML의 공백에 관계없이 출력은 동일합니다 (vs. pre)
추가 패딩이 요소에 추가되지 않습니다 (NickG의 display:block의견 참조 )
스타일 변경을 위해 모든 HTML 파일로 이동하지 않고도 일부 공유 CSS를 사용하여 가로 및 세로 링크 목록을 쉽게 전환 할 수 있습니다.
없음 float또는 clear주위의 내용에 영향을주는 스타일
스타일은 내용과 별개입니다 (vs.  또는 pre하드 코딩 된 나누기)
이것은 a.toc:afterand를 사용하여 느슨한 링크에도 사용할 수 있습니다.<a class="toc">
여러 나누기를 추가하고 접두사 / 접미사 텍스트를 추가 할 수 있습니다

어쩌면 누군가 나와 같은 문제가있을 수 있습니다.

나는 요소에 display: flex있었으므로 사용해야했습니다 flex-direction: column.

br태그를 설정하면 display: none도움이되지만 WordsRunTogether로 끝날 수 있습니다. 대신 공백 문자로 바꾸는 것이 더 도움이됩니다.

HTML :

<h1>
    Breaking<br />News:<br />BR<br />Considered<br />Harmful!
</h1>

CSS :

@media (min-device-width: 1281px){
    h1 br {content: ' ';}
    h1 br:after {content: ' ';}
}

방법에 대한 <pre>태그?

출처 : http://www.w3schools.com/tags/tag_pre.asp

예를 들어 많은 패딩을 추가하고 텍스트를 새 줄로 나눌 수 있습니다.

p{
    padding-right: 50%;
}

반응 형 디자인의 상황에서 특정 너비 범위 내에서만 텍스트를 분할해야하는 상황에서 제대로 작동했습니다.

 공백 대신 사용 하면 중단이 방지됩니다.

<span>I&nbsp;DONT&nbsp;WANT&nbsp;TO&nbsp;BREAK&nbsp;THIS&nbsp;LINE&nbsp;UP, but this text can be on any line.</span>

오버 플로우 랩 사용 : break-word; 처럼 :

.yourelement{
overflow-wrap: break-word;
}

Vincent Robert와 Joey Adams의 답변이 모두 유효합니다. 그러나 마크 업을 변경하지 않으려면  Javascript를 사용하여 삽입하면 됩니다.

마크 업을 변경하지 않고 CSS에서이를 수행 할 방법이 없습니다.

제 경우에는 줄 바꿈을하기 위해 입력 버튼이 필요했습니다.
버튼에 다음 스타일을 적용하고 작동했습니다.

clear:both;

누군가에게 도움이되는 경우 ...

당신은 이것을 할 수 있습니다 :

<p>This is an <a class="on-new-line">inline link</a>?</p>

이 CSS로 :

a.on-new-line:before { 
  content: '&nbsp;'; 
  font-size:0; 
  display:block;
  line-height:0;
}

이것은 Chrome에서 작동합니다.

p::after {
    content: "-";
    color: transparent;
    display: block;
}

나는 매우 간단한 해결책을 좋아합니다. 여기에 하나 더 있습니다.

<p>hello <span>How are you</span></p>

그리고 CSS

p {
 display: flex;
 flex-direction: column;
}

항상 줄을 끊을 것이기 때문에 중단 점을 사용하고 싶지 않은 것 같습니다. 그 맞습니까? 그렇다면  텍스트에 중단 점 을 추가하는 방법에 대해 클래스에  다음 과 같이 클래스 를 지정하면 숨기려는 크기 바로 위의 미디어 쿼리를 사용하여 숨길 수  있으므로 특정 너비에서 중단되지만 해당 너비 이상으로 인라인으로 유지됩니다.

HTML :

<p>
The below line breaks at 766px.
</p>

<p>
 This is the line of text<br class="hidebreak"> I want to break.
</p>

CSS :

@media (min-width: 767px) {
  br.hidebreak {display:none;}
}

https://jsfiddle.net/517Design/o71yw5vd/

안에 내용을 선언해야합니다 . 그런 다음 줄이 끊어집니다.

\A 줄 바꿈 문자를 의미합니다.

.class_name::after {
  content: "\A";
  white-space: pre;
}

하지마 줄 바꿈을 원하면 하나를 사용하십시오.

참고 URL : https://stackoverflow.com/questions/2703601/how-to-line-break-from-css-without-using-br

'development' 카테고리의 다른 글

해시 셋과리스트 성능 (0)	2020.02.27
프로그래밍 방식으로 UIButton 제목 UILabel 글꼴 크기 설정 (0)	2020.02.27
안드로이드에서 프로그래밍 방식으로 dp의 여백을 어떻게 설정합니까? (0)	2020.02.27
Swift를 사용하여 어디서나 터치하여 iOS 키보드 닫기 (0)	2020.02.27
Git 브랜칭 모델은 무엇입니까? (0)	2020.02.27

현재글사용하지 않고 CSS에서 줄 바꿈하는 방법

big-blog

사용하지 않고 CSS에서 줄 바꿈하는 방법

사용하지 않고 CSS에서 줄 바꿈하는 방법
?

`<br/>`정상적으로 사용 하되 `display: none`원하지 않을 때는 숨 깁니다 .

링크 목록

'development' 카테고리의 다른 글

'development'의 다른글

티스토리툴바

사용하지 않고 CSS에서 줄 바꿈하는 방법

사용하지 않고 CSS에서 줄 바꿈하는 방법 ?

<br/>정상적으로 사용 하되 display: none원하지 않을 때는 숨 깁니다 .

링크 목록

'development' 카테고리의 다른 글

'development'의 다른글

관련글

티스토리툴바

사용하지 않고 CSS에서 줄 바꿈하는 방법
?

`<br/>`정상적으로 사용 하되 `display: none`원하지 않을 때는 숨 깁니다 .