Jak dodać dopełnienie do obszaru tekstowego bez powodowania zwiększenia szerokości?

Question

Mam problemy z ustawieniem szerokości elementu tekstowego i używanie wypełnienia za pomocą CSS. Wartość dopełnienia wydaje się zmieniać szerokość textarea, której wolałbym nie robić.

To jest mój kod HTML:

<div id="body"> 
    <textarea id="editor"></textarea> 
</div> 

A mój kod CSS:

#body { 
    height:100%; 
    width:100%; 
    display:block; 
} 

#editor { 
    height:100%; 
    width:100%; 
    display:block; 
    padding-left:350px; 
    padding-right:350px; 
} 

Jednak wartości dopełnienia nie wydają się działać jak można by oczekiwać. Szerokość obszaru tekstowego zwiększa się o 350 pikseli w obu kierunkach, zamiast definiować przestrzeń między granicami elementu i jego zawartością.

Rozważałem tylko wycentrowanie tekstu, ustawiając marginesy na "0px auto", ale chciałbym, aby użytkownik nadal mógł przewijać obszar tekstowy, gdy mysz unosi się nad jednym z pustych marginesów. Z tego samego powodu nie mogę dodać kolejnego elementu div, który działałby jako opakowanie, ponieważ użytkownik nie byłby w stanie przewijać pustych obszarów, ale tylko wzdłuż obszaru tekstowego bez marginesów.

Czy ktoś może pomóc?

Answer 1

Jako szerokość treści, CSS box model definiujemy szerokość, z wyłączeniem obramowania, wypełnienia i marginesu.

szczęście CSS3 ma nową box-sizing właściwość, która umożliwia zmianę tego zachowania, aby zamiast obejmować dopełnienia itp określonej szerokości przy użyciu:

box-sizing: border-box; 

Zgodnie z linku powyżej, większość nowoczesnych przeglądarek (w tym IE> = 8) obsługują tę właściwość, ale mają różne nazwy w każdej przeglądarce.

Answer 2

Szerokość określona przez CSS nie zawiera dopełnienia ani obramowania (zgodnie ze specyfikacją W3C). Domyślam się, że jednym ze sposobów jest użycie JavaScriptu, który ustawia szerokość #editora na szerokość #body minus 700px, ale to trochę nieładne ... Nie jestem pewien, czy istnieje sposób CSS robienia tego, co chcesz tutaj. Oczywiście, możesz użyć marginesu, a następnie zarejestrować zdarzenie onMouseWheel na #body i pracować z tym ...

Answer 3

Określenie szerokości i marginesów/padding w '%' pomaga. Oto jeden z przykładów -

Live @http://jsfiddle.net/ninadpachpute/V2aaa/embedded/result

#body { 
    background-color:#ccc; 
    height:100%; 
    width:100%; 
    display:block; 
} 

textarea#editor { 
    border:none; 
    width:80%; 
    height:100%; 
    margin-left:10%; 
    margin-right:10%; 
} 

Answer 4

Niektóre przeglądarki pozwalają kierować zastępczy na zmianę koloru itd., Więc można dodać dopełnienie, a także:

::-webkit-input-placeholder { /* WebKit browsers */ 
    padding: 5px 0 0 5px; 
} 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    padding: 5px 0 0 5px; 
} 
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    padding: 5px 0 0 5px; 
} 
:-ms-input-placeholder { /* Internet Explorer 10+ */ 
    padding: 5px 0 0 5px; 
}