블록 요소는 텍스트가 두 줄로 묶일 때 전체 너비를 사용합니다.

Question

저는 이것이 항상보고 싶어하기 때문에 기본적으로 궁금합니다. 해결책이 있는지를 아는 사람은 아무도 없습니다.

일반적으로 배경이있는 멋진 찾고 단추가 표시 블록 또는 인라인 블록입니다.

문제는 다음과 같습니다. 특정 너비의 div 안에 버튼이있어 160px라고 말하면서 내부에 표시 블록이나 인라인 블록이있는 경우, 캔트 내부의 텍스트가 모두 한 줄에 들어간다면 그것은 당신이 기대할 것 인 것처럼 2로 감싸고 있지만 이제는 더 이상 정말로 div의 전체 너비를 차지할 필요가없는 두 줄에 있습니다. 나는 정말로 이런 일이 일어난다는 것에 놀랍지는 않지만 누군가가 css 나 이것을 고치는 JS 해결책을 알고 있는지 궁금해하고 있었다.

코드 :

<div style="width: 160px; padding: 10px; background: blue;"> 
    <a href="#" style="background: red; display: block;">Test with a longwrappingword</a> 
</div> 

JSFiddle here

Answer 1

이 무슨 뜻인가? 앵커에 width 속성을 추가했습니다.

<div style="width: 160px; padding: 10px; background: blue;"> 
    <a href="#" style="background: red; display: block; width: 100px;">Test with a longwrappingword</a> 
</div> 

Answer 2

이게 무슨 뜻이야?

http://jsfiddle.net/UPxZm/

<div style="width: 160px; padding: 10px; background: blue;"> 
    <a id="block" href="#" style="background: red; display: block;">Test with a longwrappingword</a> 
</div> 

<script> 
var $block = $('#block'); 
var orig = $block.html(); 
var index = orig.lastIndexOf(' ') || -1; 
var longword = orig.substring(index + 1, orig.length); 

$block.html(orig + longword); 
var wanted_width = $block[0].scrollWidth/2; 
$block.html(orig); 
$block.width(wanted_width); 
</script> 

Answer 3

당신을 위해 this 사용할 수 있습니까?

<div style="width: 160px; padding: 10px; background: blue;"> 
    <a href="#" style="background: red; display: table; width: 1%">Test with a longwrappingword</a> 
</div> 
<span style="padding-left:130px">^ Where the element COULD end if it wanted to</span>