Как я могу предотвратить разрыв строки на значке SVG?
Предположим, в HTML-документе у меня есть что-то вроде ссылки, которая начинается после другого символа без пробелов, например
p {
max-width: 140px;
}<p>This is some text that includes a link (<a href = "https://example.com">example</a>)</p>Если ширина области просмотра такова, что строка должна разорваться посередине первого слова текста ссылки, то предыдущий символ (в данном случае открывающая скобка) «прилипает» к ссылке, т.е. стандартный алгоритм компоновки нарушается. строка у ближайшего предшествующего пробела.
Однако, если я хочу вставить значок SVG в начало элемента a:
p {
max-width: 140px;
}<p>This is some text that includes a link (<a href = "https://example.com"><svg style = "height: 1em; color: green;" viewbox = "0 0 10 10" fill = "currentColor"><circle cx = "5" cy = "5" r = "5" /></svg>example</a>)</p>Тогда линии теперь разрешено разрывать любую сторону SVG.
Вопрос
Есть ли способ заставить механизм компоновки обрабатывать svg так же, как и обычные текстовые символы, чтобы открывающая скобка все еще «прилипала» к тексту ссылки?
Я не могу сделать весь абзац или всю ссылку white-space: nowrap — я хочу, чтобы текст мог нормально обтекаться как внутри, так и снаружи ссылки, мне просто нужно, чтобы он не обрывался вокруг <svg> (если только ссылка целиком не предшествует по пробелам). По сути, я хочу иметь возможность вставлять значок в начало ссылки, не мешая нормальному поведению макета текста, как если бы значок был просто еще одним символом со всеми теми же свойствами Юникода, что и первый символ существующего текста ссылки.
Это возможно?
Ответы 4
У меня есть для вас решение, которое потребовало двух основных изменений.
- Преобразуйте SVG в URL-адрес изображения .svg.
- Добавьте
::beforeк тегу привязки и добавьте SVG к егоcontent.
Пример:
p {
max-width: 140px;
}
a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.a::before {
content: url('https://img.cdn4dd.com/s/media/photosV2/1954ba82-d91f-43a2-8838-767fd2ad386f-retina-large.svg');
display: block;
width: auto;
height: auto;
}<p>
This is some text that includes a link
<a class = "a" href = "https://example.com">
<span>
(example)
</span>
</a>
</p>Я не на 100% понимаю, чего вы добиваетесь.
<nobr> может хранить контент вместе:
p {
width: 140px;
background: #eee;
}<p>This is some text that includes a link
<nobr>(
<a href = "https://example.com">
<svg style = "height: 1em; color: green;" viewbox = "0 0 10 10" fill = "currentColor"><circle cx = "5" cy = "5" r = "5" /></svg>example example example example example
</nobr>
</a>)</p>Я внес небольшие изменения в вашу демо-версию, чтобы показать проблему. Вы предложили альтернативу nowrap, имеющую тот же недостаток.
Вы можете попытаться смоделировать символы для вашего SVG, используя чистый CSS (можно использовать псевдоэлемент ::first-letter).
Но я думаю, точного поведения стандартного персонажа вы не добьетесь.
Ответ Танишка работает, но, например, если бы скобка была перед изображением, как это было в вашем первоначальном примере, а не после, скобка и изображение были бы разделены на разные строки.
Если вы действительно хотите, чтобы поведение было похоже на персонажа, лично я бы обратился к типографике Дингбат.
Вы, безусловно, можете создать свою собственную типографику Dingbat, встроить набор значков SVG и использовать их по своему усмотрению в потоке символов (это тот же принцип, что и значок материала Google).
Например, сайт Fontello позволяет создать собственную типографику за несколько кликов.
В конце концов я выбрал именно этот подход: на самом деле я использую значки материалов, поэтому я только что смог переключиться с встраивания SVG на использование лигатур из опубликованного шрифта значков, поэтому механизм компоновки просто видит символы. check_circle или что-то в этом роде.
Рад, что вы решили это!
Я думаю, лучше всего добавить значок svg в качестве фонового изображения.
p {
width: 140px;
resize: both;
overflow: auto;
outline: 1px solid;
}
a {
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='5' r='5' fill='green' /%3E%3C/svg%3E%0A") 0 0 / contain no-repeat;
padding-left: 1.25em;
}<p>This is some text that includes a link (<a href = "https://example.com">example</a>)</p>Спасибо, да, это, наверное, самый чистый подход в целом. Я не смог использовать его в своем проекте, так как бывают случаи, когда мне нужно добавить несколько отдельных значков в начало ссылки, но я обязательно учту это для более простых случаев в будущем.
В вашем примере скобка находится внутри
<a>, а не перед ней. Я попробовал поиграть с вашим решением, поместив(непосредственно перед открывающим тегом<a>и удалив все пробелы внутриaиspan, но это, похоже, возвращается к той же проблеме. Изначально у меня был разрыв строки между(и изображением.