텍스트 영역의 비정상적인 모양?


273

일반적으로 텍스트 영역은 다음과 같이 직사각형 또는 정사각형입니다.

평소 텍스트 영역

그러나 나는 예를 들어 다음과 같은 사용자 정의 모양의 텍스트 영역을 원합니다.

맞춤형 텍스트 영역

이것이 어떻게 가능한지?


45
향후 3 년간 가장 많이 사용 된 웹 트로피에 오신 것을 환영합니다!
l0b0

24
완전히 관련이 없음 : 이것을 사용하려는 컨텍스트를 물어봐도 될까요? 나는 이것이 유용한 시나리오를 실제로 알 수 없기 때문에 그것에 대한 영감을 얻고 싶습니다.
user98085

23
모두 에게 중요한 문제 가 없습니다 . 를 사용하여 <div>텍스트를 저장 하는 것은 좋은 해결책 이 아닙니다 . 디자인에 도움이 될 수 있으며 읽기 전용 텍스트에 허용 될 수 있지만 (의 목적을 완전히 상실한 contenteditable) 사용자의 텍스트 입력 에는 좋지 않습니다 . div (콘텐츠 편집 가능 요소)는 일반 양식 요소와 같은 표준 입력 요소가 아니므로 하나처럼 취급 되지 않으므로 충돌이 발생했을 때 브라우저에 내용이 저장 되지 않습니다 . div를 사용하면 데이터가 손실 됩니다. 이 예제를 참조하십시오 .
Synetech

3
실제로 이것은 "해결되고있는 문제에 대한 최소한의 이해를 보여주었습니다"
Alien Mr.

9
그렇다면 수직 스크롤 막대를 어디에서보고 싶습니까?
Rob W

답변:


262

소개

첫째, 다른 게시물에서 제안 된 많은 솔루션이 있습니다. 나는 이것이 CSS 2013 속성이 필요하지 않기 때문에 현재 (2013 년) 가장 많은 수의 브라우저와 호환 될 수 있다고 생각합니다. 그러나이 방법은을 지원하지 않는 브라우저 에서는 작동 하지 않으므로contentdeditable 주의하십시오.

사업부 솔루션 contenteditable

@Getz 에서 제안한 것처럼 div를 사용하고 contenteditable일부 div로 모양을 만들 수 있습니다 . 다음은 메인 div의 왼쪽 상단과 오른쪽 상단에 떠있는 두 개의 블록이있는 예입니다.

Firefox 28의 결과

보시다시피, 게시물에서 요청한 것과 동일한 결과를 원하면 테두리를 약간 사용해야합니다. 메인 div는 모든면에 파란색 테두리가 있습니다. 다음으로, 빨간색 블록은 주요 사업부의 숨기기 상단 테두리 잘 접착 될 수 있으며, 당신은 단지 특정 측면 (에 그들에게 국경을 적용 할 필요 하단 왼쪽 오른쪽 블록, 하단 오른쪽 왼쪽)입니다.

그런 다음 " 제출 "버튼이 트리거 되면 Javascript를 통해 컨텐츠를 가져올 수 있습니다 . 그리고 당신은 또한 CSS (나머지 할 수있을 것 같은데 font-size, color등) :)

전체 코드 샘플

.block_left {
  background-color: red;
  height: 70px;
  width: 100px;
  float: left;
  border-right: 2px solid blue;
  border-bottom: 2px solid blue;
}

.block_right {
  background-color: red;
  height: 70px;
  width: 100px;
  float: right;
  border-left: 2px solid blue;
  border-bottom: 2px solid blue;
}

.div2 {
  background-color: white;
  font-size: 1.5em;
  border: 2px solid blue;
}

.parent {
  height: 300px;
  width: 500px;
}
<div class="parent">
  <div class="block_left"></div>
  <div class="block_right"></div>
  <div class="div2" contenteditable="true">
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut..."
  </div>
</div>


1
훌륭한 해결책이지만 버그가 You can't apply a border color for the editable section keeping the two corner div's background-color:white있습니다. 그렇지 않습니까? 여전히 이것이 이길 것입니다. +1
Rajesh Paul

3
문제가 보이지 않습니다. jsfiddle.net/qgfP6/6 에 background-color : white을 설정할 수 있습니다. 그러나, 그렇지 않으면 나쁜 일이 일어난 배경을 설정해야합니다 : jsfiddle.net/qgfP6/7가 (당신이 부모 컨테이너의 경계를 볼 수 있습니다 ...)
막심 Lorant에게

1
그러나 더 많은 div가 필요한 해결 방법이 있습니다. 투명하고 테두리가없는 패 런트 요소는 테두리와 배경으로 겹치는 div로 채워지고 원하는 효과를 만들기 위해 패딩 div로 채워집니다.
Qwerty

@MaximeLorant 나는 그에 bad things대해서만 이야기하고있었습니다 . 이것들은 내가 방금 요청한 상황과 바이올린에서 한 일의 부작용입니다. 그러나 확실히 좋은 해결책입니다. 설명을위한 감사합니다.
Rajesh Paul

1
훌륭한 답변! 그리고 여기에 가서 두 개의 텍스트 영역을 두 줄로 나누는 내용과 함께 두 개의 텍스트 영역을 사용하는 줄을 따라 무언가를 제안하려고했습니다.
Zarathuztra

115

가까운 장래에 우리는 css-shapes이것을 달성하기 위해 소위 사용할 수 있습니다 . contenteditable속성이 true결합 된 div css-shapes는 텍스트 영역을 모든 종류의 모양으로 만들 수 있습니다.

현재 Chrome Canary는 이미을 지원합니다 css-shapes . CSS 모양으로 가능한 예는 다음과 같습니다.

여기에 이미지 설명을 입력하십시오

여기서는 텍스트 흐름을 정의하기 위해 다각형 모양을 사용하고 있습니다. 텍스트 영역에 원하는 모양과 일치하도록 두 개의 다각형을 만들 수 있어야합니다.

자세한 내용은 http://sarasoueidan.com/blog/css-shapes/css-shapes 에서 작성되었습니다.

Chrome Canary에서 CSS 모양을 사용하려면 다음 단계를 따르세요.

  1. chrome : // flags / # enable-experimental-web-platform-features를 주소 표시 줄에 복사하여 붙여 넣은 다음 Enter 키를 누릅니다.
  2. 해당 섹션에서 '활성화'링크를 클릭하십시오.
  3. 브라우저 창 하단의 '지금 다시 시작'버튼을 클릭하십시오.

    에서 : http://html.adobe.com/webplatform/enable/

.container {
  overflow: hidden;
  shape-inside: polygon(200.67px 198.00px, 35.33px 198.47px, 34.67px 362.47px, 537.00px 362.74px, 535.67px 196.87px, 388.33px 197.00px, 386.67px 53.53px, 201.33px 53.53px);
  font-size: 0.8em;
}
/** for red border **/

.container:before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  width: 190px;
  height: 190px;
  background-color: white;
  border-right: 1px solid red;
  border-bottom: 1px solid red;
}
.container:after {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 190px;
  height: 190px;
  background-color: white;
  border-left: 1px solid red;
  border-bottom: 1px solid red;
}
<div class="container" contenteditable="true">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis diam lacus, id lacinia quam interdum quis. Ut vitae dignissim lorem, nec lobortis turpis. Fusce non fringilla nulla, eu blandit urna. Nulla facilisi. Nunc tristique, mauris vitae
  tincidunt egestas, eros metus dapibus sapien, quis tincidunt sem dui ac purus. Morbi lobortis, quam sit amet consequat aliquam, elit mi rutrum erat, id tempus turpis turpis et sem. Vivamus tempor mollis porttitor. Sed elementum nisl sit amet sapien
  auctor imperdiet. Sed suscipit convallis nisi, in dignissim risus placerat suscipit. Sed vel lorem eu massa vulputate pretium. Nulla eget dolor sed elit gravida condimentum non vel lorem. Vivamus pretium, augue sed aliquet ultricies, neque nibh porttitor
  libero, a tristique elit mi eu nibh. Vestibulum erat arcu, condimentum eleifend adipiscing ut, euismod eu libero. In pharetra iaculis lorem, at consectetur nisi faucibus eu.

</div>

다음으로 만든 다각형 : http://betravis.github.io/shape-tools/polygon-drawing/

결과

여기에 이미지 설명을 입력하십시오

http://jsfiddle.net/A8cPj/1/


바이올린과 모범은 저에게 효과가 없었습니다. 텍스트는 다각형 아래로 이동하여 아래에 숨겨져 있습니다. 나는 Chromium 49, Firefox 44로 테스트했습니다.
deathangel908

방금 이것을 보았을 때, 이것은 반응하기 쉬운 악몽이 될 것입니다.
damiano celent

62

어쩌면 Content Editable ?

텍스트 영역이 아니지만이 모양으로 div를 성공적으로 만들면 작동 할 수 있습니다.

텍스트 영역으로는 불가능하다고 생각합니다 ...

작은 예 : http://jsfiddle.net/qgfP6/5/

<div contenteditable="true">
</div>

23

모서리가 두 개인 div로 콘텐츠 편집 가능한 div로 작업 할 수 있습니다.

<div style="border:1px blue solid ; width: 200px; height: 200px;" contenteditable="true">
  <div style="float:left; width:50px; height: 50px; border: 1px solid blue" contenteditable="false"></div>
  <div style="float:right; width:50px; height: 50px;  border: 1px solid blue" contenteditable="false"></div>
  hello world, hello worldsdf asdf asdf sdf asdf asdf
</div>

다른 모든 사용 사례를 처리하려면 JS 작업이 더 필요합니다. 그러나 기초가 있습니다.
Gidon

20

CSS 지역을 사용 하여이 작업을 수행 할 수도 있습니다

리전을 사용하면 CSS 속성을 사용하여 페이지의 위치에 관계없이 선택한 컨테이너 순서를 지정하여 컨텐트를 기존 스타일 컨테이너로 흐르게 할 수 있습니다.

(웹 플랫폼)

여기에 이미지 설명을 입력하십시오

[현재 WebKit Nightly, Safari 6.1 이상 및 iOS7에서 지원되며 플래그를 활성화 한 후에 크롬 및 오페라에서 이미 사용 가능 : enable-experimental-web-platform-features- caniuse , Web Platform ]

깡깡이

따라서 두 영역을 통해 텍스트를 이동하여 해당 텍스트 영역 모양을 만들고 내용에 편집 가능한 내용을 추가하여 편집 할 수 있습니다.

마크 업

<div id="box-a" class="region"></div>
<div id="box-b" class="region"></div>
<div id="content" contenteditable>text here</div>

(관련) CSS

#content {
     -ms-flow-into: article;
    -webkit-flow-into: article;
}

.region {
    -ms-flow-from: article;
    -webkit-flow-from: article;
    box-sizing: border-box;
    position: absolute;
    width: 200px;
    height: 200px;
    padding: 0 1px;
    margin: auto;
    left:0;right:0;
    border: 2px solid lightBlue;
}

#box-a {
    top: 10px;
    background: #fff;
    z-index: 1;
    border-bottom: none;
}

#box-b {
    top: 210px;
    width: 400px;
    overflow: auto;
    margin-top: -2px;
}

결과:

여기에 이미지 설명을 입력하십시오

지역에 대한 자세한 정보-CSS3 지역 : HTML 및 CSS3를 사용한 리치 페이지 레이아웃


1
좋은! 그것은 거의 (대부분의 사용자가 GET 크롬 카나리아에 가지고 웹 사이트를 사용하는 실험 플래그를 사용하지 않으) 지원되지만,이 그것을 할 "해야한다"길을 확실히
markasoftware

실제로 ... 불행히도, 아직 Firefox (Alpha에서도)에서 작동하지 않으며 벤더 접두사 냄새가 좋지 않습니다. (하지만이 방법은 흥미롭고 몇 달 / 년 동안 사용해야합니다.
Maxime Lorant

css 지역, css 모양, css 필터 ... 다른 것 ik
Muhammad Umer

@MuhammadUmer ... CSS 제외
Danield

18

상자에 긴 텍스트 줄이 있으면 가운데 가장자리를지나 커서가 아래로 내려 가서 수정할 수없는 것 같습니다.

**[Fiddle Diddle][1]**

    #wrap {
        overflow: hidden;
    }
    #inner {
        height: 350px;
        width: 500px;
        border: 1px solid blue;
    }
    #textContent {
        word-wrap: break-word;
        word-break: break-all;
        white-space: pre-line;
    }
    #left, #right {
        height: 50%;
        width: 25%;
        margin-top: -1px;
        padding: 0;
        border: 1px solid blue;
        border-top-color: white;
        margin-bottom: 5px;
    }
    #right {
        margin-left: 5px;
        float: right;
        margin-right: -1px;
        border-right-color: white;
    }
    #left {
        margin-right: 5px;
        float: left;
        margin-left: -1px;
        border-left-color: white;
    }
<div id="wrap">
  <div id="inner">
     <div id="left"></div>
     <div id="right"></div>
     <span id="textContent" contenteditable>The A B Cs</span>
  </div>
</div>

[1]: http://jsfiddle.net/yKSZV/

8

그 사이에 불가능합니다! 텍스트 영역은 일반적으로 입력 할 수있는 사각형 또는 사각형 상자입니다.

그러나 같은 것을 만들기 위해 2 개의 텍스트 영역을 사용하고 지정된 너비와 높이를 지정할 수 있습니다. 그렇지 않으면 나는 그것이 일어날 것이라고 생각하지 않습니다!

두 번째 방법은 편집 가능한 요소를 만드는 것입니다.

http://jsfiddle.net/afzaal_ahmad_zeeshan/at2ke/

코드는 다음과 같습니다

<div contenteditable="true">
   This text can be edited by the user.
</div>

이를 사용하면 모든 요소를 ​​편집 가능하게 만들 수 있습니다! 치수를 줄 수 있으며 작동합니다! 텍스트 영역처럼 사용할 수 있습니다.

참조 : https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable


3
아니, 넌 틀렸어. 심지어 그는 div텍스트 영역 대신 s를 사용했습니다 . 텍스트 영역은 모양으로 수정할 수 없기 때문에! :) @Markasoftware 그래서 당신은이 답변을 downvoting하는 동안 잘못되었습니다! .. 이것은 그의 답변과 동일하기 때문입니다. 여기에없는 유일한 것은 그 모양으로 편집 가능한 div를 만드는 이미지와 코드입니다!
Afzaal Ahmad Zeeshan

뭐? 오, 어서 오십시오. 당신이 아무 이유없이 나를 downvoted 유지하려면 당신은 가장 환영합니다! 내 답변은 9시 58 분에 게시되었습니다. 10:10에 답변을 게시했습니다. : /이 질문에 먼저 답변했습니다. 코드를 제공하지 않았기 때문에 많이 찬성하지 않았습니다. Howver, 나는 3 답변자 .. 상단에 대답을 게시
Afzaal 아마드 Zeeshan

LOL 실제로 "가장 오래된"탭으로 이동하면 귀하의 답변이 두 번째로 오래되었음을 나타냅니다
markasoftware

많이지지되지 않기 때문입니다! 나는 여기에 항상 활동하고 있습니다, 그래서 어떻게 최근에 게시 할 수 있습니까? 그리고 이것은 간단한 대답이었습니다. downvote를 제거 할 수 있습니까? :)
Afzaal Ahmad Zeeshan

5

당신이 결합 할 경우 CSS 모양 을 가진 contenteditable이는 웹킷 브라우저에서 수행 할 수 있습니다.

먼저 플래그를 활성화해야합니다 : enable-experimental-web-platform-features

그런 다음 웹킷 브라우저를 다시 시작한 다음이 FIDDLE 을 확인하십시오 !

이 방법은 비표준 모양에도 적용됩니다.

마크 업

 <div class="shape" contenteditable="true">
    <p>
     Text here
    </p>
  </div>

CSS

.shape{
  -webkit-shape-inside: polygon(71.67px 204.00px,75.33px 316.47px,323.67px 315.47px,321.17px 196.00px,245.96px 197.88px,244.75px 87.76px,132.33px 87.53px,132.50px 202.26px);
  shape-inside: polygon(71.67px 204.00px,75.33px 316.47px,323.67px 315.47px,321.17px 196.00px,245.96px 197.88px,244.75px 87.76px,132.33px 87.53px,132.50px 202.26px);
  width: 400px;
  height: 400px;
  text-align: justify;
  margin: 0 auto;
}

지구상에서 어떻게 그 다각형 모양을 얻었습니까?

이 사이트로 이동 하여 나만의 모양을 만드십시오!

플래그 활성화에 대한 참고 사항 : ( 여기에서 )

모양, 영역 및 혼합 모드를 활성화하려면

chrome : // flags / # enable-experimental-web-platform-features를 주소 표시 줄에 복사하여 붙여 넣은 다음 Enter 키를 누릅니다. 해당 섹션에서 '활성화'링크를 클릭하십시오. 브라우저 창 하단의 '지금 다시 시작'버튼을 클릭하십시오.


4
표준이든 아니든 (잘 문서화되고 구조화 된) 솔루션의 경우 +1
rolfl

3
@kinokijuf 요즘 표준이 어떻게되는지 깨달았습니다. 이 경우 Adobe는 모양 제안을 제시했으며 지금까지 Webkit이이를 구현 한 첫 번째 제안입니다. 편집자 초안이 11 월부터 시작된 것으로 보아 이것은 아마도 독점 확장이라고 할 수 없으며, 나중에는 더 광범위하게 구현되고 표준화 될 것입니다. 그 동안 비 Webkit 사용자는 사각형을 많이 갖게됩니다. (Heck, Firefox에는 여전히 접두사가 필요합니다 box-sizing.)
millimoose

5

을 사용 하여 복잡한 모양을 만드는 데 Google 웹 디자이너 도구 를 사용할 수 있습니다 HTML5-canvas and CSS.

또한이 모양 안에 텍스트를 입력하기 위해 입력 도구와 같은 다른 도구가 제공됩니다.

출력 파일에 많은 코드가 포함되어 있으므로 Google Web Designer 도구를 사용하여 생성 된 샘플 데모를 제공합니다.

피들 데모 >>


1
바이올린은 크롬 31.0에 (= 텍스트를 편집 할 수 없습니다) 나를 위해 일을하지 않는 / 윈도우 7
Ilmari 카로 넨

@IlmariKaronen = 텍스트를 편집 할 수 없습니까 ??? 정말로 나는 얻지 못했다. 그것을 편집 가능하게 만드는 필요성은 무엇입니까 ??
Prasanth KC

5
질문은 <textarea>편집 가능한 텍스트 상자 와 같은 것이지만 직사각형이 아닌 모양을 요구합니다. "편집 가능한"부분이 없다면, 여기에는 거의 도전이 없습니다. 사람들은 HTML 2.0에서 떠 다니는 이미지를 도입 한 이래 HTML로 텍스트를 흐르게했습니다.
Ilmari Karonen

콘텐츠 편집 가능한 속성으로 바이올린이 업데이트되었습니다. 이제 컨테이너 내부의 텍스트를 편집 할 수 있습니다.
Prasanth KC

데모에서는 전체 텍스트가 아닌 2 개의 다른 텍스트를 편집 할 수 있습니다. Chrome 31에서.
Nicolas Barbulesco

1

어떤 이유로 든 브라우저가없는 브라우저를 실제로 지원 해야하는 경우 contenteditable이벤트를 사용하여 JavaScript에서 동일한 작업을 수행 할 수 있습니다. 매우 혼란스러운 해결 방법입니다.

의사 코드 :

focused=false;
when user clicks the div
    {
    focused=true;
    }
when user clicks outside the div
    {
    focused=false;
    }
when user presses a key
    {
    if (focused)
    {
    add character of key to div.innerHTML;
    }
    }
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.