границы радиуса; переполнение: скрыто, и текст не обрезается - PullRequest
Новая
       11

границы радиуса; переполнение: скрыто, и текст не обрезается

10 голосов
/ 16 апреля 2011

Я делаю некоторый стилистический текст внутри округлых элементов div, где текст сталкивается прямо с верхом контейнера.Я смог контролировать практически весь контент, вложенные элементы div, изображения, заданные в качестве фона и т. Д., И все они были успешно обрезаны, но это доставляет мне серьезное горе.

Использование изображения старой школыграницы или сокрытие не является решением, поскольку у нас есть динамические графические фоны.Нам нужно решение для на самом деле обрезки текста.

Это в основном видно в Firefox 3.x и более старых версиях Chrome

Вот пример кода для игры:

http://jsfiddle.net/vfp3v/1/

div {
    -moz-border-radius: 45px;
    border-radius: 45px;
    background-color: #ccc;
    font-size: 100px;
    color: #777;
    line-height: 70%;
    overflow: hidden;
    width: 257px;
}

Джанк:

enter image description here

Обратите внимание, что этоисправлено в новых Chrome и FireFox 4 - шуй:

enter image description here

Большинство пользователей нашего сайта - Firefox 3.6, поэтому хотелось бы иметь возможность предложить им элегантное решениетакже.Любая помощь приветствуется!Приветствия

1 Ответ

5 голосов
/ 16 апреля 2011

Этот работает в FF 3.6: http://jsfiddle.net/vfp3v/15/

У него есть некоторые недостатки, как вы можете видеть во втором примере (в FF 3.6), обрезанная граница имеет сплошной цвет, поэтому, если вы используете какой-то фон, это может выглядеть уродливо. Просто взгляните на это, оно может соответствовать вашим потребностям.

Я только что добавил диапазон: 

<div><span></span>WXYZ</div>

и затем поместил его поверх текста с рамкой того же цвета, что и фон, и смещением, равным границе: 

div{
    position:relative;
    etc...
}
span{ 
    position:absolute; display:block; width:100%; height:100%;
    border:25px solid #fff; top:-25px; left:-25px;
    -moz-border-radius: 70px; border-radius: 70px; /* 45 radius + 25 border */       
}

edit: только что протестировал это в chrome 10.0.6 (с ошибкой отсечения) и все заработало!

В браузерах, которые правильно поддерживают радиус границы, диапазон (и его цвет границы) даже не виден, потому что он обрезан (переполнение: скрыто).

...