텍스트 너비에 맞게 단추 너비를 변경하십시오.

Question

텍스트에 단추가있어 텍스트가 단추에 비해 너무 길어 자동으로 다음 줄로 바뀝니다. 고정 된 단추 높이가 있으므로 오버플로가 표시되지 않도록 단추의 두 번째 텍스트 줄이 숨겨집니다.

example

폭을 변경하고 내부의 텍스트만큼 그것을 확인하기 위해 버튼을 설정하는 방법이 있나요?

나의 현재 CSS :

.block .btn { 
    background-color: #464646; 
    color: #fff; 
    border:none; 
    height: 30px; 
    font-family: 'Segoe UI'; 
    font-size: 16px; 
    cursor: pointer; 
} 
.block .btn:hover{ 
    background-color: rgba(40, 40, 40, 255) 
} 

편집 :

내 문제가 발견

: 스타일 폭 설정에 대한 몇 가지 남은 스타일 = ""는 HTML의 실제 버튼의 속성이 있었다. CSS 자체에는 문제가 없었습니다. 어쨌든 답변 주셔서 감사합니다!

Answer 1

그것의 약간 하드가 제공하는 더 CSS 나 HTML없이 정확하게 대답 ...하지만 공백 포장에, 버튼

예에 nowrap에 white-space을 설정하려고 때문에이 될 수있다

button{ 
    white-space:nowrap; 
} 

per MDN

은 공백의 CSS 속성을 처리하는 방법을 공백 요소 내부 설명하는 데 사용됩니다.

Answer 2

버튼의 height을 고쳐야합니다. 텍스트의 높이가 더 필요할 경우에 대비하여 min-height을 사용해보십시오.