Как выделить текст в HTML/CSS

Скажем, у меня есть белые символы, и я хочу черную контур над каждым персонажем (это отличается от всего текстового поля).

Каков код для создания этого контура?

ИЗМЕНИТЬ: Ну, облом, я не прошу целый документ. Все, что я хочу, это одна строка кода и необходимые параметры для создания контура для текста. Я не чувствую необходимости отправлять код, так как это просто просто запрос.

Я попытался использовать text-outline: 2px 2px #ff0000;, но это не поддерживается в любых основных браузерах.

Область действия:

function createTitleLegend() {
    legendTitle = document.createElement('div');
    legendTitle.id = 'legendT';
    contentTitle = [];
    contentTitle.push('<h3><font size="16">TM</font></h3>');
    contentTitle.push('<p class="test"><br><font size="6" color=#000000>We have <b><font size="7" color="white" text-outline: 2px 2px #FF0000;>21421</font></b></font></p>');
    legendTitle.innerHTML = contentTitle.join('');
      legendTitle.index = 1;
}

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

Еще один EDIT:

Это ключевая строка, где я хочу контур.

contentTitle.push('<p class="test"><br><font size="6" color=#000000>We have <b><font size="7" color="white">21421</font></b> asdasd</font></p>');

Прежде чем применить схему, строка будет записана в одну строку. После того, как я применил схему, у нас есть 3 разных строки текста.

contentTitle - это легенда на Картах Google, где выравнивание текста находится в центре. В этом предложении используется два разных типа шрифтов: один для слов и один для числа. В случае, если я применяю текстовую тень с div, это создает новую строку. Я знаю, что нормальное решение для хранения всего в одной строке - использование float. Однако, если я плаваю, больше ничего не центрируется.

Может быть, я не плаваю правильно, но до сих пор пробовал использовать div style = float и class= "float".

Ответ 3

Попробуйте следующее:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.OutlineText {
    font: Tahoma, Geneva, sans-serif;
    font-size: 64px;
    color: white;
    text-shadow:
    /* Outline */
    -1px -1px 0 #000000,
    1px -1px 0 #000000,
    -1px 1px 0 #000000,
    1px 1px 0 #000000,  
    -2px 0 0 #000000,
    2px 0 0 #000000,
    0 2px 0 #000000,
    0 -2px 0 #000000; /* Terminate with a semi-colon */
}
</style></head>

<body>
<div class="OutlineText">Hello world!</div>
</body>
</html>

... и вы также можете сделать это тоже:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.OutlineText {
    font: Tahoma, Geneva, sans-serif;
    font-size: 64px;
    color: white;
    text-shadow:
    /* Outline 1 */
    -1px -1px 0 #000000,
    1px -1px 0 #000000,
    -1px 1px 0 #000000,
    1px 1px 0 #000000,  
    -2px 0 0 #000000,
    2px 0 0 #000000,
    0 2px 0 #000000,
    0 -2px 0 #000000, 
    /* Outline 2 */
    -2px -2px 0 #ff0000,
    2px -2px 0 #ff0000,
    -2px 2px 0 #ff0000,
    2px 2px 0 #ff0000,  
    -3px 0 0 #ff0000,
    3px 0 0 #ff0000,
    0 3px 0 #ff0000,
    0 -3px 0 #ff0000; /* Terminate with a semi-colon */
}
</style></head>

<body>
<div class="OutlineText">Hello world!</div>
</body>
</html>

Вы можете делать столько контуров, сколько захотите, и достаточно возможностей для придумывания множества творческих идей.

Удачи!

Ответ 1

Ответ 2

Ответ 3