Текстовый текст HTML Ограничение для столбца таблицы

Question

У меня есть таблица шириной 200 пикселей.

имеет 2 колонки:

1. Название (простой текст, ссылки, ...)
2. Логотип (IMG)

вопрос является: когда Title + Логотип превышает 200px Мне нужно ограничить только Заголовок.

------------------------ 
|Title  |Logo  | 
------------------------ 
|Helloooo...|img  | 
------------------------ 

Ограничение только HTML и CSS

Старается разным думает:

overflow: hidden; 
text-overflow: ellipsis; 
white-space: nowrap; 
table-layout:fixed; 
... 

только результат, который я получаю:

------------------------ 
|Title  |Logo  | 
------------------------ 
|Helloooooooooooo|img  | -> more than 200px 
------------------------ 

Answer 1

Написать CSS код как ниже

#appadd { 

    white-space: nowrap; 
    overflow: hidden; 
    width: 180px; 
    height: 30px; 
    text-overflow: ellipsis; 
} 

Live Demo - Goto this Link

Answer 2

Вы можете использовать CSSword-wrap, чтобы разделить слова, которые чрезвычайно велики:

См. Это working Fiddle Пример!

.title { 
    width: 100px;   /* adjust the value to fit your needs */ 
    word-wrap: break-word; 
    display: inline-block; 
} 

Примечание:

• Поскольку перенос слов необходим блочном уровне элемента, вы должны по крайней мере установить TD с display:inline-block.
• Поскольку word-wrap ломает слово, когда она переполняет обертку , вам необходимо указать фиксированную ширину на TD.

---

Вы можете проверить таблицу here at MDN совместимости браузера.

Answer 3

Я считаю, что это невозможно с HTML и CSS, если вы хотите сделать это на стороне клиента, вы можете использовать javascript, получить ширину ячейки Title и затем обрезать текст соответственно, для этого вы можете использовать Substring function, althrought вы можете использовать библиотеку JavaScript, как JQuery