Могу ли я иметь тег <span>, игнорирующий CSS его родительского контейнера? - PullRequest
Новая
       40

Могу ли я иметь тег <span>, игнорирующий CSS его родительского контейнера?

1 голос
/ 11 марта 2012

Я имею дело с некоторым текстом HTML, к которому у меня есть доступ для чтения. Я могу что-то изменить с помощью CSS, но фактическое расположение HTML-кода является статическим. Я использую несколько сотен экземпляров HTML того же типа, который выложен следующим образом: 

<div class = 'outer'>
     <span class = 'inner'>5</span> 
     Some other random text that is formatted according to the style of the outer class.    
</div>

Для целей проекта, над которым я работаю, весь текст, который я отображаю во внешнем классе (, за исключением содержимого внутреннего диапазона ), должен быть обоснован. Но содержимое внутреннего промежутка должно быть привязано к началу строки. Моя текущая проблема заключается в том, что, поскольку весь текст выровнен, содержимое внутреннего диапазона выталкивается в разные места строки, потому что текст отличается.

Так есть ли способ заставить внутренний пролет игнорировать тот факт, что внешний класс говорит, что это оправдано? Как мне решить эту проблему?

enter image description here

Мне было бы хорошо, если бы 6 и 7 выглядели так же, как выглядят 8 и 9, при условии, что они последовательны.

РЕДАКТИРОВАТЬ: CSS 

.outer {
 padding-left:10px;
 padding-right:10px;
 font-family:palatino;
 font-size:17px;
 -webkit-column-count: 2;
 -webkit-column-gap: 20px;
 -webkit-column-rule: solid 1px #999;
 border-bottom: solid 1px #999;
 text-align:justify;
 }

А потом я понял, что часто у меня нет класса, установленного в SPAN, поэтому я попытался сделать то, что в приведенном ниже ответе предлагалось сделать так: 

.outer span{
 display:inline-block;
 width:10px;
}//But it still isn't fixing the issue of the left side alignment

Ответы [ 2 ]

1 голос
/ 11 марта 2012

Если я правильно понимаю ситуацию, у вас есть короткие абзацы, начинающиеся с цифры, и абзацы должны быть представлены как оправданные с обеих сторон, но пробел между числом и первым словом не должен быть растянут.Более того, кажется, что параграфы начинаются с пробела без перерывов;иначе я не могу понять, почему они начинаются с пробела переменной ширины на скриншоте.

Я не думаю, что есть какое-либо решение CSS.Свойства CSS для выравнивания довольно просты, не позволяя вам контролировать, какие пробелы корректируются (даже в соответствии с текстом CSS 3).

Хотя есть решение на уровне символов, но с некоторыми рисками.Вместо пробелов без перерывов (которые рассматриваются некоторыми браузерами как не растягиваемые, но не всеми, и тенденция, по-видимому, рассматривает их как обычные пробелы, кроме разрыва строки), используйте пробелы фиксированной ширины.Однако это может не сработать в IE 6, в зависимости от шрифта;см. мои заметки о пространствах Unicode .

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

 <div class = 'outer'>
 &ensp;5&ensp;Text of the paragraph.
 </div>

Пространство en, ширина которого составляет 0,5 метра, может быть слишком широким.Пространство по четырем элементам (ширина 0,25 мкм) соответствует типичной ширине обычного пространства в не растянутом виде (хотя это зависит от шрифта).Чтобы использовать его, замените &ensp; на &#x2005; или реальным символом U + 2005, если используется кодировка UTF-8.

0 голосов
/ 11 марта 2012

вы можете использовать display: inline-block и указать ширину ... Вот так 

.outer{
    text-align: justify;
}

.inner{
    display: inline-block;
    width: 10px;
}​
...