고정 너비로 ​​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내부에 콘텐츠를 배치, 속성 <SPAN>로모그래퍼 width버튼보다 몇 픽셀 좁은 속성도 (트릭을 할 것 같다 IE6에서 :-).

---

단추가 작동하지만 style="height: 100%;"iPhone iOS 5.1.1 용 Safari의 첫 번째 행보다 더 많이 표시되도록 단추 에 추가하고 싶습니다.

---

<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 속성을 제거한 후 내 작업을 완료했습니다.

희망은 모두를 위해 작동합니다!

---

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

"둘 다"나를 위해 일했다.

---

이와 같은 여러 줄 버튼은 실제로 구현하기가 쉽지 않습니다. 이 페이지 에는 주제에 대한 흥미로운 (일부 다소 오래된) 토론이 있습니다. 멀티 라인 요구 사항을 삭제하거나 divs 및 CSS를 사용하여 사용자 정의 버튼을 만들고 버튼으로 작동하도록 JavaScript를 추가하는 것이 가장 좋습니다.

---

word-wrap: break-word;

나를 위해 일했다.

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