HTML에서 div의 너비를 정의하십시오 (최대 너비 설정)

이것은 매우 간단해야하지만 작동시키지 않아야합니다.HTML에서 div의 너비를 정의하십시오 (최대 너비 설정)

Google지도 (google.maps.OverlayView 구현)에 툴팁 종류가 포함될 div가 있습니다. 표시 할 텍스트의 양은 가변적입니다. 하나의 짧은 단어 또는 여러 문장 일 수 있습니다. div의 너비는 최대 150px 여야합니다. 전체 텍스트가 150px 미만으로 표시되어야하는 경우 (한 줄에 표시) div는 필요한만큼 작아야합니다 (즉, 넓게). 텍스트가 길면 여러 줄로 나뉘어 야하며 div는 최대 150 픽셀입니다.

나는 (CSS에서)해야 할 일은 "max-width : 150px;"를 설정하는 것이라고 생각했습니다. 그러나 이것은 내가 원하는 것을하지 않습니다. (IE8에서 테스트 중입니다.) 텍스트는 모든 공백에 의 줄 바꿈을 받았습니다. (!!) div는 150px보다 작게 끝납니다. ("width : 150px;"를 설정하면 텍스트가 짧을 때 div가 원하는 것보다 넓어집니다.)

왜 텍스트가 최대 너비를 채우지는 못하지만 너무 자주 파열됩니까? ? (단어 둘러싸 기나 텍스트 줄 바꿈으로 "놀기"가 도움이되지 않았습니다.)

다음과 같이 말 할 수 있습니까? 한 줄에 텍스트가 들어가면 가능한 한 좁게 div를 유지하고, 그렇지 않은 경우 만들지 마십시오. 150px보다 넓습니까?

도움을 주시면 감사하겠습니다.

편집

답변/의견을 주셔서 감사합니다,하지만 내 문제는 남아있다.

내 CSS는 unspectacularyl, 다음과 같습니다

.TTWayPoint { 
    max-width:  150px; 
    border:   1px solid black; 
    padding:  3px; 
    background-color: lightyellow; 
    font:   8pt Verdana, Tahoma, "Microsoft Sans Serif", sans-serif; 
}

문제는 더 이상 텍스트가 최대 폭을 기입하지 않습니다 즉, 모든 공백에서 (포장 라인) 상처 입는 것입니다. display 속성으로 재생하는 것이 도움이되지 않습니다.

저는 이것이 IE8 문제라고 생각합니다. (실제로 웹 브라우저 컨트롤이있는 VB.NET 응용 프로그램을 개발하고 있는데 AFAIK은 IE에 시스템에 설치된 IE8 버전을 사용하고 있음을 의미합니다.

출처

2013-05-17 user2395654

내가 좀 잠시 자신을 놀라게되었다 (첫번째 오답을 기록했다)하지만, 사용 사례는 [이 바이올린] (HTTP에서 입증 된 바와 같이, 잘 작동 : //jsfiddle.net/Curry/MXcuh/). 코드에는 다른 문제가 있어야합니다. –

div를 display: table 또는 display: inline-block;으로 설정하면됩니다. 여기 display: table과 예입니다 :

http://codepen.io/anon/pen/nlhLp

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 

div {background: #e7e7e7; display: table; max-width: 130px; padding: 10px; margin: 0 auto 40px;} 

</style> 

</head> 
<body> 

<div>Some text</div> 

<div>Some text some text some text some text</div> 

</body> 
</html>

출처

2013-05-17 23:37:24

HTML에서 div의 너비를 정의하십시오 (최대 너비 설정)

답변

관련 문제