HTML CSS Box Styling

내 HTML 코드를 보완하기 위해 CSS를 사용하려고합니다. 나는 효과적으로 텍스트 크기에 따라 크기를 변경하는 작은 상자를 만들려고합니다. 현재, 이것은 실제 상황과 같습니다. enter image description here HTML CSS Box Styling

본질적으로 텍스트 주위에 작은 상자를 형성하고 싶습니다. 이미지에서 마지막 '상자'를 확인하십시오. 문자열이 너무 길면 잘라내어 다음 줄에서 계속됩니다.

CSS 코드 및 사용 예가 포함되어 있습니다.

<style type="text/css"> 
    boxytest 
    { 
    padding: 10px; 
    text-align: center; 
    line-height: 400%%; 
    background-color: #fff; 
    border: 5px solid #666; 
    -webkit-border-radius: 30px; 
    -moz-border-radius: 30px; 
    border-radius: 30px; 
    -webkit-box-shadow: 2px 2px 4px #888; 
    -moz-box-shadow: 2px 2px 4px #888; 
    box-shadow: 2px 2px 4px #888; 
    } 
</style> 

<body> 
    <div align="center"> 
    <boxytest> Hey guys! What's up? </boxytest> 
    </div> 
</body>

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

출처

2012-03-30 user432584920684

것으로 보인다 키 스타일 decleration 귀하의 질문에 대답이이 [바이올린]에 넣을 수 있습니다 (http://jsfiddle.net)? – zzzzBov

여기는 바이올린입니다. http://jsfiddle.net/zBExV/ – user432584920684

글쎄, 내가 생각하기로는 마크 업 측면에서 보면 boxytest를 클래스로 만들고 새로운 요소를 만들고 싶지 않을 것입니다. 그리고 'align = center'는 사용하지 마십시오. 유지하는 것이 고통입니다. CSS에서

<body> 
    <p class="boxy">Test sentence</p> 
<body>

나는 같은 것을 할 것

.boxy { 
    padding: 10px; 
    text-align: center; 
    line-height: 400%%; 
    background-color: #fff; 
    border: 5px solid #666; 
    -webkit-border-radius: 30px; 
    -moz-border-radius: 30px; 
    border-radius: 30px; 
    -webkit-box-shadow: 2px 2px 4px #888; 
    -moz-box-shadow: 2px 2px 4px #888; 
    box-shadow: 2px 2px 4px #888; 
    /* to prevent word wrapping */ 
    white-space: nowrap; 
    overflow: hidden; 
    }

The last bit is based on this post합니다.

출처

2012-03-30 13:35:17 chipcullen

나는 당신의 충고를 받아 들였고 지금은 이렇게 보입니다. http://jsfiddle.net/zBExV/1/ 그러나 더 작은 너비로 변경할 수있는 방법이 있으며 추가 단어가 세로로 확장되어야합니까? – user432584920684

죄송합니다 - 오해했습니다 - 당신이 텍스트를 감싸고 싶지 않다고 생각했습니다. 이것이 바로 공백 선언입니다. Simon West가 맞습니다. display : inline-block을 추가해야합니다. 중심에 배치하려면 text-align : center가 적용된 상위 요소가 필요합니다. 나는 당신의 바이올린을 업데이트했습니다 : http://jsfiddle.net/zBExV/2/ – chipcullen

도와 주셔서 대단히 감사합니다! 'Tis 크게 감사하겠습니다! :) – user432584920684

칩 쿨렌 (Chipcullen)은 자신의 요소를 발명하는 것이 아마도 이것에 관한 가장 좋은 방법은 아니라고 말합니다. 하지만 당신의 누락이 display:inline-block;

jsfiddle here

출처

2012-03-30 13:39:33

알았어요! 당신의 도움을 주셔서 감사합니다! – user432584920684

HTML CSS Box Styling

답변

관련 문제