HTML 버튼의 텍스트를 고정된 너비로 래핑하는 방법은?

HTML 버튼의 텍스트를 고정된 너비로 래핑하는 방법은?

HTML 버튼에 고정된 폭을 주면 버튼 안의 텍스트는 절대 감싸지지 않는다는 것을 방금 알았습니다.낱말 포장으로 해봤는데, 포장할 수 있는 공간이 있어도 그 부분은 아주 잘렸습니다.

어떻게 하면 HTML 버튼의 텍스트를 다른 테이블 셀처럼 고정된 너비 랩으로 만들 수 있습니까?

<td class="category_column">
  <input type="submit" name="ctl00$ContentPlaceHolder1$DataList1$ctl12$ProCat_NameButton" value="Roos Sturingen / Sensors" id="ctl00_ContentPlaceHolder1_DataList1_ctl12_ProCat_NameButton" class="outset" style="height:118px;width:200px;font-size:18px;color:#7F7F7F;width:200px;white-space:pre;"
  />
</td>

CSS 클래스는 테두리를 추가하고 패딩을 수정하는 것 외에는 아무것도 하지 않습니다.추가하면word-wrap:break-word이 버튼에는 다음과 같이 포장됩니다.

Roos Sturingen / Sen
sors

그리고 저는 단어들 사이에서 그것을 잘라내는 것이 가능하다면 그것이 단어 중간에 끊어지는 것을 원하지 않습니다.

저는 당신이 화이트스페이스 CSS 속성을 활용할 수 있다는 것을 알았습니다.

white-space: normal;

그리고 그것은 일반적인 텍스트로서 단어를 깨트릴 것입니다.

white-space: normal;
word-wrap: break-word;

나의 것은 두가지 모두와 함께 합니다.

HTML 소스에 줄 바꿈을 삽입하면 다음과 같이 강제(브라우저 허용)할 수 있습니다.

<INPUT value="Line 1
Line 2">

물론 줄을 어디에 놓을 것인가를 결정하는 것이 반드시 사소한 것은 아닙니다.

HTML을 사용할 수 있다면<BUTTON>대신에<INPUT>, 버튼 라벨이 요소의 내용이 아니라 요소의 내용이 되도록 합니다.value속성, 해당 내용을 a 안에 배치합니다.<SPAN>와 함께width버튼보다 몇 픽셀 더 좁은 속성이 효과가 있는 것 같습니다(IE6 :-에서도).

   white-space: normal;
   word-wrap: break-word;

'둘 다'가 통했어요

버튼이 작동하지만 추가하려는 버튼을 발견했습니다.style="height: 100%;"iPhone iOS 5.1.1용 Safari의 첫번째 행 이상을 표시하도록 버튼으로 이동합니다.

그와 같은 여러 줄 버튼은 구현하기에 그리 사소한 것이 아닙니다.이 페이지에는 이 주제에 대한 흥미로운(일부 오래된) 토론이 있습니다.아마도 멀티라인 요구사항을 삭제하거나 예를 들어 사용자 지정 버튼을 만드는 것이 최선의 방법일 것입니다.divs와 CSS, 그리고 자바스크립트를 추가하여 버튼으로 작동하게 합니다.

내부에 내부 분열이 있다면<button>이렇게 태그를...

<button class="top-container">
    <div class="classA">
       <div class="classB">
           puts " some text to get print." 
       </div>
     </div>
     <div class="class1">
       <div class="class2">
           puts " some text to get print." 
       </div>
     </div>
</button>

클래스 A의 텍스트가 클래스 1 데이터에서 겹칠 때가 있는데, 이 둘이 하나의 버튼 태그에 있기 때문입니다.문자를 깨려고 하는데..

 word-wrap: break-word;         /* All browsers since IE 5.5+ */
 overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */ 

하지만 이건 안되고 난 이걸 시도해봅니다..

white-space: normal;

위의 CSS 속성을 제거하고 내 작업을 완료한 후.

희망은 모두에게 효과가 있을 것입니다!!!

word-wrap: break-word;

나를 위해 일했습니다.

line-break: anywhere;

아니면

word-break: break-all;

또한 가능합니다.

언급URL : https://stackoverflow.com/questions/862010/how-to-wrap-text-of-html-button-with-fixed-width